3

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

2 回答 2

2

电荷属性

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

从文档：

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

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

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

http://vallandingham.me/bubble_charts_in_d3.html

于 2013-08-20T15:47:56.700 回答
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;})
于 2013-08-20T16:32:03.807 回答