Question

我尝试使用D3.js绘制位置和连接之间的网络。我有两个文件，＆＃34; nodes.csv＆＃34;和＆＃34; edges.csv＆＃34;包含我的网络信息。我希望得到类似于使用Gephi＆＃39; geolayout插件的最终结果。

nodes.csv文件格式如下：

+-----+-----+-----------+-------------+
| Id  | ... |    Lat    |     Lon     |
+-----+-----+-----------+-------------+
| 123 | ... | 38.889931 | -77.009003  |
| 145 | ... | 40.730610 | -73.935242  |
| 198 | ... | 34.052235 | -118.243683 |
+-----+-----+-----------+-------------+

edge.csv具有以下格式：

+--------+--------+
| source | target |
+--------+--------+
|    123 |    145 |
|    198 |    165 |
|    198 |    173 |
+--------+--------+

我已经能够在地图上成功绘制节点，但我不确定如何使用edges.csv的源和目标值来引用节点中的行。如何将内存中的所有节点加载到＆＃34;查找＆＃34; D3线的起点和终点？将这些CSV转换为JSON格式会更好吗？对我工作节点情节的任何有益批评也是受欢迎的。

此处是指向仅显示节点的工作代码的链接：http://bl.ocks.org/almsuarez/1173e4cabbcfd032642e

Answer 1

绘制＆＃34;链接＆＃34;在这里，我将如何编码：

// grab the edges data
d3.csv("edges.csv", function(error, edges){

  // create a map of our nodes for faster lookups
  var nodesById = d3.map(nodes.data(), function(d){
    return d.key;
  });

  // loop the edges
  edges.forEach(function(d){

    // get pixel coordinates
    var p1 = projection([nodesById.get(d.source).lon, nodesById.get(d.source).lat]),
        p2 = projection([nodesById.get(d.target).lon, nodesById.get(d.target).lat]);

    // append the line
    svg.append("line")
      .attr("x1", p1[0])
      .attr("x2", p2[0])
      .attr("y1", p1[1])
      .attr("y2", p2[1])
      .style("stroke", "steelblue")
  });

});

全面工作example。

使用D3.js在地图上绘制节点和边缘的网络

1 个答案: