对于每个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);
};
声明一个圆形变量,同时设置属性&amp;动画
var circle = svg.selectAll("circle").data(json)
circle.enter().append('circle')
动画
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();
将技术附加到圈子
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)});
});
此刻有时会相互交替。我怎么能阻止这个?建议&amp;例子将不胜感激 - 谢谢。
答案 0 :(得分:7)
您有几种不同的选择,具体取决于您的具体用途。
一种方法是使用力导向布局,该布局将力施加到节点以确保它们在达到稳定状态后不重叠(注意它们可能在达到稳定状态时重叠)。您可以在http://bl.ocks.org/1377729查看此示例。请注意,您可以完全自定义节点的外观并消除线条。
我在http://jsfiddle.net/xwZjN/2/创建了基于强制的布局的示例。使用基于强制的布局,您需要先添加节点。
force
.nodes(nodes)
.start();
然后更新每个部队重新计算的位置。
force.on("tick", function() {
text.attr("x", function(d) { return d.x + 6; })
.attr("y", function(d) { return d.y + 4; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
另一种选择是使用pack
布局,例如http://bl.ocks.org/1628131上的示例。这种布局将圆圈紧密地包在一起,并确保它们不重叠。