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

我通过设置一个固定的x位置而改变y位置来绘制圆圈。问题是圆圈重叠，因为每个圆的半径是不同的。如何避免在使用d3.js时形状的重叠

在理论上理想的解决方案是，我可能想要获取前一个圆的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/

来源

2013-08-20 soum

如何被确定的半径？ – elsherbini

@ - elsherbini，我刚刚补充说。看看是否有帮助。在此先感谢 – soum

这里有没有一个解决方案：http://tributary.io/inlet/6283630

的关键是跟踪半径的总和所有以前的圈子。我这样做，在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;})

来源

2013-08-20 16:32:03 elsherbini

@ elsherbini - 非常感谢，这是一个非常好的方向。 – soum

充电属性

力布局中的收费指的是环境中的节点如何相互推开或吸引彼此。有点像磁铁，节点有可能是正电荷（吸引力）或负电（排斥力）。

从文档：

如果指定了负责设定充电强度为指定的值。如果未指定充电，则返回当前的充电强度，默认为-30。如果电荷是一个常数，那么所有节点都有相同的电荷。否则，如果charge是一个函数，那么该函数将针对每个节点（按顺序）进行评估，并将此上下文作为强制布局传递给节点及其索引;函数的返回值然后用于设置每个节点的费用。只要布局开始，该功能就会被评估。

负值导致节点排斥，而正值导致节点吸引。对于图形布局，应该使用负值;对于n体模拟，可以使用正值。假设所有节点都是电荷和质量相等的无穷小点。充电力通过Barnes-Hut算法有效地执行，为每个刻度计算四叉树。将充电力设置为零将禁用四叉树的计算，如果您不需要n体力，这可以显着提高性能。

一个很好的教程，这将有助于你在行动中看到这一点：

http://vallandingham.me/bubble_charts_in_d3.html

来源

2013-08-20 15:47:56 BentOnCoding

我不认为@soum完全使用强制布局。 – elsherbini

非常有用的一点，但他为什么不想用？ – BentOnCoding

@ Robotsushi - 其实我正在认真考虑用力布局做这个练习 – soum

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

回答

相关问题