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上编写了关于动态力布局可视化的教程，也许它可以为你提供一些未来努力的想法。

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

1 个答案: