D3 - 从2列节点列表创建网络图 [英] D3 - create network graph from 2 column list of nodes

问题描述

我们编译了一个SQL和Web服务器的2列电子表格，每天都与其他人进行交流：

We have compiled a 2 column spreadsheet of SQL and Web servers that all talk to one other daily:

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

我想创建一个'pretty'和简单的D3图形，（不一定是一个，甚至一个静态图形可能做）从上面的数据。流动方向不那么重要。

I want to create a 'pretty' and simple D3 graph, (not necessarily that one, even a static graph might do) from above data. Direction of flow is not that important. Each group (SQL or WEB) needs to be in a different color though.

但是，D3需要使用json格式的数据。

However, D3 requires the data to be in json format.

如何使D3代码接受我的2列数据？

或如何将我的2列数据转换为D3代码需要的JSON格式？

How do I make the D3 code accept my 2 column data ?
or How do I convert my 2 column data into the JSON format that D3 code requires ? I'm comfortable writing T-SQL code btw if someone can guide.

推荐答案

我们的目标是加载您的CSV并将其转换为强制引导图形d3的JSON结构。

Our goal is to load your CSV and convert into a JSON structure expected by force Directed graph d3.

为此：

  //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.

现在将节点和链接提供给强制定向图。

Now feed the nodes and links to the Force directed graph.

工作代码此处

这篇关于D3 - 从2列节点列表创建网络图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！