javascript - 迭代地将链接附加到 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 中将其注释掉了如果我了解它的功能是什么，我也许可以帮助您调试它 :) 如果您取消注释它，您会看到您的链接和连接的节点由于 .getElementById('directedCheck').checked 问题而消失

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