6

对于每个 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);
};

声明一个圆形变量，同时设置属性和动画

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)});

});

目前，有时它们往往会相互重叠。我怎样才能防止这种情况？建议和示例将不胜感激 - 谢谢。

4

1 回答 1

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; });
   });

另一种选择是使用类似于http://bl.ocks.org/1628131pack示例的布局。这种布局会将圆圈紧紧地包装在一起，并确保它们不会重叠。

于 2012-10-18T01:28:58.927 回答