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

Question

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

nodes.csv 文件格式如下：

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

而edges.csv的格式如下：

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

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

这是一个 link 仅绘制节点的工作代码：http://bl.ocks.org/almsuarez/1173e4cabbcfd032642e

Answer 1

要绘制 "linking" 条线，我将按以下方式进行编码：

// 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 在地图上绘制节点和边的网络

Plot network of nodes and edges on map using D3.js

javascript

geojson

d3.js