d3.js forceSimulation()与对象条目

时间:2017-09-13 22:39:33

标签: javascript json d3.js force-layout


我的气泡图有问题。
我之前使用了forceSimulation()和一个对象数组,它起作用了。现在我更改了数据源但它没有,即使控制台显示无错误
我的数据是名为“lightWeight”的对象,具有以下结构:data
我用它来添加这样的圆圈:

// simulate physics
  var simulation = d3.forceSimulation()
    .nodes(lightWeight)
    .force("charge", d3.forceCollide(function(d) { return d.r + 10; }))
    .force("x", d3.forceX())
    .force("y", d3.forceY())
  .on("tick", ticked); // updates the position of each circle (from function to DOM)

  // call to check the position of each circle
   function ticked(e) {
      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
  }

然后我创建模拟:

{{1}}

但是圈子仍然在彼此之上并且不会像之前那样成为泡泡图。
我很抱歉,如果这可能是一个愚蠢的问题,我是d3的新手并且很少了解forceSimulation()实际上是如何工作的。
例如,如果我用不同的数据称它多次,结果模拟是否只会影响指定的数据?
提前谢谢!

1 个答案:

答案 0 :(得分:1)

这里有几个问题:

  1. 您正在使用个不同的数据集进行渲染和力模拟,即:.data(d3.entries(lightWeight))创建一个 new 对象数组,用于绑定到DOM,而.nodes(lightWeight)试图在原始lightWeight对象上运行力模拟(它需要一个数组,因此无法使用)。

尝试在开始执行任何代码之前先进行类似var lightWeightList = d3.entries(lightWeight);的操作,并将该数组用于绑定到DOM以及用作力模拟的参数。当然,这应该清楚地表明,在更新所要查看的节点时,您可能会遇到其他挑战—覆盖lightWeightList将破坏以前的任何节点位置(因为我们看不到您的更多代码,尤其是您第二次调用它的 how ,所以我没有任何有用的想法。

  1. 尤其是如果您打算重新调用此代码,则还有另一个问题:链接.enter()调用的方式意味着node仅引用输入选择-表示,如果再次调用此代码,则力模拟将仅更新ticked内的 new 节点。

使用D3,我发现一个好习惯是将您的选择保留在单独的变量中,例如:

var lightWeightList = d3.entries(lightWeight);

// ...

var nodes = bubbleSvg.selectAll('circle')
  .data(lightWeightList);
var nodesEnter = nodes.enter()
  .append('circle');
// If you're using D3 v4 and above, you'll need to merge the selections:
nodes = nodes.merge(nodesEnter);
nodes.select('circle')
     .attr('r', function(d) { return scaleRadius(d.value.length)})
     .attr('fill', function(d) { return colorCircles(d.key)})
     .attr('transform', 'translate(' + [w/2, 150] + ')');

// ...

var simulation = d3.forceSimulation()
  .nodes(lightWeightList)
  .force("charge", d3.forceCollide(function(d) { return d.r + 10; }))
  .force("x", d3.forceX())
  .force("y", d3.forceY())
  .on("tick", ticked);

function ticked(e) {
  nodes.attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });
}