javascript - 动态清除和更新 d3.js 强制定向布局更改

Question

与 the Mobile Patent Suit example by Mike Bostock例如，我能够使用自己的数据重新创建，但我想更进一步，并在下拉更改时动态更新节点关系。该代码几乎每次都有效，但偶尔我会得到一个没有关系的节点(见下图)，即使数据可用。我认为我在清除然后更新选择更改时的节点时可能做错了什么，但对我来说这很奇怪有时会起作用。非常感谢任何帮助。

http://jsfiddle.net/calanoue/r6BRr/

var selectedCode = '0';

function updateNodes() {
   // Update the links and the nodes any time the data changes
   svg.selectAll('g').remove();

   links = allData[0][selectedCode];

   // Compute the distinct nodes from the links.
   links.forEach(function (link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
   });

   force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(links)
        .size([width, height])
        .linkDistance(80)
        .charge(-400)
        .on("tick", tick)
        .start();

   path = svg.append("g").selectAll("path")
        .data(force.links())
        .enter().append("path")
        .attr("class", "link relationship")
        .attr("marker-end", "url(#relationship)");

   circle = svg.append("g").selectAll("circle")
        .data(force.nodes())
        .enter().append("circle")
        .attr('class', "generic")
        .attr("r", 8)
        .call(force.drag);
}

function tick() {
   // Use elliptical arc path segments to doubly-encode directionality.
   path.attr("d", linkArc);
   circle.attr("transform", transform);
}

function linkArc(d) {
   var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
   return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

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

function clearNodes() {
   nodes = {};
   links = [];
   force.start();
   d3.timer(force.resume);
}

function codeChange() {
   selectedCode = this.value;
   clearNodes();
   updateNodes();
}

缺少节点关系图像:

Answer 1

您遇到的问题是您的原始数据 allData 在每次数据更改迭代时被链接和节点的计算更改。毕竟，您设置了 links = cloneData[0][selectedCode];。您需要在每次数据更改之前克隆 allData。

function codeChange() {
    selectedCode = this.value;
    cloneData = clone(allData); // added
    clearNodes();
    updateNodes();
}

这是一个FIDDLE进行所有更改以使其正常工作。我从这个 SO question 借用了克隆功能.

注意:我还删除了您的一个下拉选项，因为您在 allData 中只有 3 组数据。如上所述，这不是导致问题的原因，但只要您选择了不存在的集合，它就会抛出错误。