使用d3.js时如何避免形状重叠

我通过设置一个固定的x位置但改变y位置来画圆。问题在于，由于每个圆的半径不同，因此这些圆是重叠的

理想情况下，在理论上解决这个问题时，我可能希望得到上一个圆的y位置，并将当前圆的半径添加到其中，以得到当前圆的y位置。如果我想错了，请纠正我

现在我正在做这样的事情

var k = 10;

var circleAttributes = circles.attr("cx", '150')
        .attr("cy", function (d) {
        return (k++) * 10;    //this is a very gray area
    })

我得到了一个重叠。理想情况下，我希望将这些圆彼此隔开。即使外部边缘相互接触，我也能接受。我应该怎么做

我正在写一个范围，我用它来得到半径

var rScale = d3.scale.linear()
        .domain([min, max])
        .range([10, 150]);

简单地把它作为半径传递，就像这样

.attr("r", function(d) { return rScale(d.consumption_gj_);})

这是我的小提琴

http://jsfiddle.net/sghoush1/Vn7mf/27/

---

电荷属性

力布局中的电荷是指环境中的节点如何相互推开或吸引。就像磁铁一样，节点上的电荷可以是正电荷（吸引力）或负电荷（排斥力）

来自文档：

如果指定了电荷，则将电荷强度设置为指定值。如果未指定电荷，则返回当前电荷强度，默认值为-30。如果电荷为常数，则所有节点都具有相同的电荷。否则，若charge是一个函数，那个么该函数将针对每个节点（按顺序）进行求值，并传递给节点及其索引，该上下文作为force布局；然后使用函数的返回值设置每个节点的费用。每当布局开始时，都会对函数进行求值

负值会导致节点排斥，而正值会导致节点吸引。对于图形布局，应使用负值；对于n体模拟，可以使用正值。假设所有节点都是具有相同电荷和质量的无穷小点。电荷力通过Barnes–Hut算法有效实施，计算每个滴答声的四叉树。将充电力设置为零将禁用四叉树的计算，如果不需要n体力，则可以显著提高性能

这是一个很好的教程，可以帮助您看到这一点：

这里有一个解决方案：

关键是要记录之前所有圆的半径之和。我在一个

forEach

循环中这样做：

data.forEach(function(d,i){
  d.radius = rScale(d.consumption_gj_);
  if (i !== 0){
    d.ypos = d.radius*2 + data[i-1].ypos;
  }
  else {
    d.ypos = d.radius*2;
  }
})

然后，在设置圆的属性时，可以使用新的

d.radius

和

d.ypos

    var circleAttributes = circles.attr("cx", '150')
        .attr("cy", function (d,i) {
            return d.ypos + 5*i;
    })
        .attr("r", function(d) { return d.radius;}) 

---

半径是如何确定的？@--elsherbini，我刚刚加了这个。看看这是否有帮助。提前感谢我认为@soum根本没有使用强制布局。@Robotsushi——事实上，我正在认真地重新考虑使用强制布局做这个练习。我对此有很好的经验。我建议至少玩一下它，因为它有很大的潜力。@robotsushi/@elsherbini——在读了robotsushi的话后，我重新访问了这个项目（我真的可以用一个真实的名字：-）……这是我想到的，我想我应该和你们分享。注意，链接的文章是用咖啡脚本编写的，而不是Javascript。