Question

我通过设置固定的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/

Answer 1

费用属性

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

来自文档：

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

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

一个很好的教程，可以帮助您了解这一点：

http://vallandingham.me/bubble_charts_in_d3.html

Answer 2

这里有解决方案：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;})

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

2 个答案: