迭代地将链接附加到 D3 力定向网络可视化

Question

我是 javascript/d3 的初学者，遇到了一个很棒的 network visualization 我想玩玩。

我希望通过在指定时间添加链接及其关联节点来使可视化动态化。

为了让我开始，我首先尝试保持所有节点都显示，然后简单地添加出现在数据文件中的链接。

剥离 original html 文件，这是我的尝试（添加 iterateLink() 函数，并稍微调整 initializeGraph() ）：

function iterateLinks() {
  for ( x = 0; x < zlinkz.length; x++ ) {
    setTimeout( function() {

      links.push(zlinkz[x]);
      restart();
    }, 2000);
  }
}

function initializeGraph(newGraph) {
  newNodes = [];
  newLinks = [];
  // We need a hash to fit the link structure of D3's force-directed layout
  nodeHash = {};

  zlinkz   = [];

  for ( x = 0; x < newGraph.nodes.length; x++ ) {
    newNodes.push(newGraph.nodes[x]);
    nodeHash[String(newGraph.nodes[x].id)] = x;
  }

  for ( x = 0; x < newGraph.links.length; x++ ) {
    newLinks.push({id: x, source: newGraph.nodes[nodeHash[newGraph.links[x].source]], target: newGraph.nodes[nodeHash[newGraph.links[x].target]], "cost": newGraph.links[x].cost, "weight": newGraph.links[x].invcost });
  }

  force = d3.layout.force()
      .size([width, height])
      .nodes(newNodes) // initialize with a single node
      .links(newLinks)
      .linkDistance(60)
      .charge(-60)
      .on("tick", tick);

  var svg = d3.select("#viz").append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("id", "networkViz");

  svg.append("rect")
      .attr("width", width)
      .attr("height", height)
      .attr("id","backgroundRect")
      .on("mousemove", mousemove);

  nodes = force.nodes();
  links = force.links();
  node = svg.selectAll(".node");
  link = svg.selectAll(".link");
  arrowhead = svg.selectAll(".link");

  cursor = svg.append("circle")
      .attr("transform", "translate(-100,-100)")
      .attr("class", "cursor")
      .attr("r", 1)
      .style("opacity", 0);

  restart();
  iterateLinks();
}

完整的代码可以在jsfiddle找到。

尽管我使用了 iterateLinks() 函数，但该函数似乎没有遍历链接并且不显示链接。

你知道我的功能哪里出了问题，以及如何解决吗？

非常感谢任何帮助！ 谢谢。

===== 编辑 =====

感谢@Barnab 和@AmeliaBR 的帮助，我对here 进行了更改，还包括动态添加节点。

Answer 1

几件事：

• 在您的 iterateLinks 中，x 变量在调用 setTimeout 中的函数之前从 0 变为 2，导致始终推送 zlinkz[3] 而不是您想要的 0 到 2 的范围。我以这种方式修复了它它会按照您可能想要的方式工作：

  var it = 0;
  for (x = 0; x < zlinkz.length; x++) {
      setTimeout(function () {
          links.push(zlinkz[it]);
          restart();
          it++;
      }, 2000);
  }
  

• 您的arrowhead 绘图似乎有问题。我在更新后的jsfiddle 中对其进行了注释，如果我了解它的功能，我可能会帮助您调试它:) 如果您取消注释它，您会看到您的链接和节点连接消失，因为@987654332 有问题@

PS : 我在my blog 上写了一篇关于动态力布局可视化的教程，也许它可以给你一些未来努力的想法。