对于每个json,创建一个圆,并随机输出x和y
for(var d = 0; d<json.length; d++){
circlexloc[d] = ((Math.random()*2*r)-r);
circleyloc[d] = ((Math.random()*2*r)-r);
};
Run Code Online (Sandbox Code Playgroud)
声明圆形变量,同时设置属性和动画
var circle = svg.selectAll("circle").data(json)
circle.enter().append('circle')
Run Code Online (Sandbox Code Playgroud)
动画
circle.transition()
.duration(1000)
.attr("fill", "blue")
.attr('opacity',0.6)
.attr('r', 5)
.attr("cx", function(d, i) {return circlexloc[i] })
.attr("cy", function(d, i) {return circleyloc[i] });
circle.exit().transition().duration(1000)
.attr('opacity',0)
.attr("r",0)
.remove();
Run Code Online (Sandbox Code Playgroud)
将技术附加到圈子
var text = svg.selectAll('text')
text.data(json)
.enter().append("svg:text")
.style("font-size", "10px")
.text(function(d) { return d.TechName; })
.transition().duration(1000)
.attr('opacity', 1)
.attr("x", function (d, i) { return (circlexloc[i]+6)})
.attr("y", function (d, i) { return (circleyloc[i]+4)});
Run Code Online (Sandbox Code Playgroud)
});
此刻,有时候相互倾斜.我怎么能阻止这个?建议和示例将不胜感激 - 谢谢.