D3 - 从 2 列节点列表创建网络图

Question

我们编制了一份包含 SQL 和 Web 服务器的 2 列电子表格，它们每天都相互通信：

Source,Target  
sql1,web1  
sql1,web2  
sql2,web2  
sql2,sql1  
sql2,web3  
web2,web3  
web3,web2
web3,sql2

我想根据上述数据创建一个“漂亮”和simple D3 graph，（不一定是那个，即使是静态图也可以）。流向并不那么重要。但是，每个组（SQL 或 WEB）都需要使用不同的颜色。

但是，D3 要求数据为 json 格式。

如何让 D3 代码接受我的 2 列数据？
或如何将我的 2 列数据转换为 D3 代码所需的 JSON 格式？如果有人可以指导，我很乐意编写 T-SQL 代码。

Answer 1

我们的目标是加载您的 CSV 并转换为强制有向图 d3 所期望的 JSON 结构。

为此：

  //load your CSV via ajax as below
  d3.csv("my.csv", function(json) {
  //load the csv as json
  //array of nodes
  var nodes = [];
  /array of links
  var links = [];
  json.forEach(function(d){
    //check if node is present if not add that in the array to get unique nodes.
    if (nodes.indexOf(d.Source.trim()) <0){
      //sorce node not there so add
      nodes.push(d.Source.trim())
    }
    if (nodes.indexOf(d.Target.trim()) <0){
      //target node not there so add
      nodes.push(d.Target.trim())
    }
    //link to map the nodes with its index.
    links.push({source:nodes.indexOf(d.Source.trim()), target:nodes.indexOf(d.Target.trim())})
  });
  nodes = nodes.map(function(n){
    return {name:n}
  })
  //now the usual code for force graph.

现在将节点和链接提供给力有向图。

工作代码here