javascript - d3.js forceSimulation()与对象条目

我的气泡图有问题。
以前，我将forceSimulation（）与对象数组结合使用，并且可以正常工作。现在，即使控制台未显示任何错误，我也更改了数据源，但没有更改。

我的数据是一个名为“ lightWeight”的对象，具有以下结构：

我用它来添加圆圈，如下所示：

// draw circles
var node = bubbleSvg.selectAll("circle")
   .data(d3.entries(lightWeight))
   .enter()
   .append("circle")
   .attr('r', function(d) { return scaleRadius(d.value.length)})
   .attr("fill", function(d) { return colorCircles(d.key)})
   .attr('transform', 'translate(' + [w/2, 150] + ')');

然后创建仿真：

// 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; });
  }

但是，各圈子彼此重合，并没有像以前那样成为泡沫图。
我很抱歉这可能是一个愚蠢的问题，我是d3的新手，并且几乎不了解forceSimulation（）的实际工作方式。
例如，如果我用不同的数据多次调用它，那么生成的模拟会只影响指定的数据吗？
提前致谢！

最佳答案

这里有几个问题：


您正在使用不同的数据集进行渲染和力模拟，即：.data(d3.entries(lightWeight))创建用于绑定到DOM的对象的新数组，而.nodes(lightWeight)尝试在原始的lightWeight对象上运行力模拟（它需要一个数组，所以这行不通）。


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


特别是如果您打算重新调用此代码，则还有另一个问题：链接.enter()调用的方式意味着node将仅引用回车选择-这意味着，如果再次调用此代码，则强制模拟只会更新ticked中的新节点。


使用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; });
}