javascript - D3 强制布局数据不更新

Question

我正在使用 D3 的强制布局图来绘制数据。

1. 当我update使用新数据调用函数setInterval时，力布局图节点从随机位置开始。我怎样才能解决这个问题？
2. 即使console打印了正确的数据，数据也没有得到更新。我该如何解决这个问题？

这是jsfiddle：https ://jsfiddle.net/mootqvs1/

Answer 1

（请避免在同一个问题中询问不同的问题，特别是当它们不相关时。在这里我将解释您的问题 #2，这是特定于您的代码的。您的问题 #1 是一个普遍问题，已经在SO这里有几个问题/答案）

更新功能的问题是您将索引用作键。但是，这些不同数据集的索引是相同的！

因此，改变这个...

if (!node.id) node.id = ++i;

...对于为节点分配唯一ID的东西。显而易见的选择是使用他们的名字：

if (!node.id) node.id = node.name;

但是，即使这样也行不通，因为某些节点具有相同的名称......所以，我们可以混合使用这些方法：

if (!node.id) node.id = node.name + (++i);

请记住，这只是一个示例。最好的解决方案是找到一些属性（或属性组合），这些属性对于每个节点总是唯一且相同的。

这是您仅进行该更改的代码：

var width = 680,
  height = 380,
  root;

var data1 = {
  "name": "RootNode",
  "children": [{
    "name": "B1",
    "children": [{
      "name": "D1"
    }, {
      "name": "D2"
    }, {
      "name": "D3"
    }]
  }, {
    "name": "B2",
    "children": [{
      "name": "D1"
    }, {
      "name": "D2"
    }, {
      "name": "D3"
    }, {
      "name": "D4"
    }]
  }, {
    "name": "B3",
    "children": [{
      "name": "D1"
    }, {
      "name": "D2"
    }, {
      "name": "D3"
    }, {
      "name": "D4"
    }, {
      "name": "D5"
    }]
  }, {
    "name": "B4",
    "children": [{
      "name": "D1"
    }, {
      "name": "D2"
    }, {
      "name": "D3"
    }, {
      "name": "D4"
    }]
  }, {
    "name": "B5",
    "children": [{
      "name": "D1"
    }]
  }]
};

var data2 = {
  "name": "Root",
  "children": [{
    "name": "Box1",
    "children": [{
      "name": "device1"
    }, {
      "name": "device2"
    }, {
      "name": "device3"
    }]
  }, {
    "name": "Box2",
    "children": [{
      "name": "device1"
    }, {
      "name": "device2"
    }, {
      "name": "device3"
    }, {
      "name": "device4"
    }]
  }, {
    "name": "Box3",
    "children": [{
      "name": "device1"
    }, {
      "name": "device2"
    }, {
      "name": "device3"
    }, {
      "name": "device4"
    }, {
      "name": "device5"
    }]
  }, {
    "name": "Box4",
    "children": [{
      "name": "device1"
    }, {
      "name": "device2"
    }, {
      "name": "device3"
    }, {
      "name": "device4"
    }]
  }, {
    "name": "Box5",
    "children": [{
      "name": "device1"
    }]
  }]
};

var force = d3.layout.force()
  .linkDistance(80)
  .charge(-120)
  .gravity(.05)
  .size([width, height])
  .on("tick", tick);

var svg = d3.select(".network-graph").append("svg")
  .attr("width", width)
  .attr("height", height);

var link = svg.selectAll(".link"),
  node = svg.selectAll(".node");

root = data1;
update();


setInterval(function() {
  root = data2;
  update();
}, 5000);


function update() {
  var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);


  // Restart the force layout.
  force
    .nodes(nodes)
    .links(links)
    .start();

  // Update links.
  link = link.data(links, function(d) {
    return d.target.id;
  });

  link.exit().remove();

  link.enter().insert("line", ".node")
    .attr("class", "link");

  // Update nodes.
  node = node.data(nodes, function(d) {
    return d.id;
  });

  node.exit().remove();

  var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .call(force.drag);

  nodeEnter.append("circle")
    .attr("r", function(d) {
      return 15 || 4.5;
    });

  nodeEnter.append("text")
    .attr("dy", ".35em")
    .text(function(d) {
      return d.name;
    });

  node.select("circle")
    .style("fill", color);

}

function tick() {
  link.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });

  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
}

function color(d) {
  return d._children ? "#3182bd" // collapsed package
    : d.children ? "#c6dbef" // expanded package
    : "#fd8d3c"; // leaf node
}

// Toggle children on click.
function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [],
    i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = node.name + (++i);
    nodes.push(node);
  }

  recurse(root);
  return nodes;
}

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="network-graph"></div>