d3 嵌套两个网络 csv 文件（节点和边）答案

【问题标题】：d3 nesting two network csv files (nodes & edges)d3 嵌套两个网络 csv 文件（节点和边）
【发布时间】：2014-05-07 16:32:44
【问题描述】：

我想要做的是 d3.nest() 一个 csv 到另一个。

节点列表如下所示：

id,movie,year,genre
85442,Hamlet,1907,Drama
57421,Don Quijote,1908,Drama
13146,Amleto [I],1908,Drama
85443,Hamlet,1908,Drama
160468,Othello,1909,Drama
160468,Othello,1909,Romance

边缘或链接看起来像这样：

sourceid,targetid
234,99455
234,125817
234,201681
476,72885
476,188536
476,246634
1028,14948
1028,60050

所以我想通过给定的 ID 将边嵌套到节点列表中。

我正在做一些不合适的嵌套，现在看起来像这样：

    d3.csv("edges.csv", function(edges){
    d3.csv("nodes.csv", function(nodes){

        var nested_data = d3.nest()
            .key(function(d) { return d.sourceid; })
            .key(function(d) { return d.id; })
            .entries(edges)
            .entries(nodes);     
        console.debug(nested_data);
    });
    });

我寻求帮助发现了这个：D3 change elements based on two different datasets?

但我无法理解它。真的有那么难吗？或者可能有另一种方式来做到这一点？我发现了这个可视化 (http://mbostock.github.io/d3/talk/20111116/airports.html)，它还可以处理两个 csv 文件和网络结构，而不使用 nest()。

谢谢，

金

【问题讨论】：

听起来嵌套并不是解决这个问题的最佳方式。您需要做的就是遍历边列表，并在节点列表中找到每个边的源和目标。
好的，谢谢！你有任何循环的例子吗？我可以用纯 js 编写它，但也许 d3 已经为此提供了一些内置方法？找到解决方案后，我会在此处发布。
D3 没有为此内置任何内容。

标签： javascript csv d3.js nested graph-visualization

【解决方案1】：

因为很多人都看过这个问题，所以我想写一个关于如何解决这个问题的简短后续文章，据我所知。

Lars 已经给出了正确的提示。所以这里只是一个编码版本。

d3.csv("edges.csv", function(edges){
d3.csv("nodes.csv", function(nodes){

  var newlist = [];

  var i = edges.length;

  while(i--){

    var edge = edges[i];

      newlist.push(

          nodes[edge.sourceid].x),
          nodes[edge.targetid].y)

      );
  }

  var nested_data = d3.nest()
      .key(function(d) { return ... })
      .entries(newlist);  

  });
});

这并不完全适合这个问题，因为它假定节点列表是按 id 排序的。上面的两个列表可以用 http://underscorejs.org/#find 之类的东西来迭代

希望这会有所帮助。

【讨论】：