尝试连接来自 "flat" JSON 的 D3 节点以制作公司层次结构图

Question

我正在尝试使用 D3 创建公司层次结构图..使用此示例中的代码：

http://bl.ocks.org/mbostock/2949981

有没有办法根据这个 json:

创建该图

      links = [
        {
            "Source": "1",
            "Target": "2",
        },
        {
            "Source": "1",
            "Target" : "3"
        },
        {
            "Source": "2",
            "Target": "4",
        },
        {
            "Source": "2",
            "Target": "5",
        },
        {
           "Source" : "3",
           "Target" " "6"
        }
    ]

      nodes = [
        {
            "Id": "1",
            "Name": "TEST NODE ONE",
            "Url": "http://www.google.com"
        },
        {
            "Id": "2",
            "Name": "TEST NODE TWO",
            "Url": "http://www.yahoo.com"
        },
        {
            "Id": "3",
            "Name": "TEST NODE THREE",
            "Url": "http://www.whosebug.com"
        },
        {
            "Id": "4",
            "Name": "TEST NODE FOUR",
            "Url": "http://www.reddit.com"
        }
         {
            "Id": "5",
            "Name": "TEST NODE FIVE",
            "Url": "http://www.stack.com"
        }
        {
            "Id": "6",
            "Name": "TEST NODE SIX",
            "Url": "http://www.six.com"
        }

    ]

我想让每个节点成为一个矩形，我可以在其中放置来自 "nodes" json 的员工姓名。但是将每个节点与"link"json中的数据连接起来。请随意更改 link json 以使其对您更有意义。

我还想使连接节点的线笔直并使其垂直，但我主要关心的是通过上面的 json 在页面上显示图形。

感谢您的帮助。

Answer 1

您需要将在节点 ID 之间关联的 links 转换为通过引用在 nodes 中的实际对象之间关联的数组。一个简单的循环就是这样做的：

var links = [ { "Source": "1", "Target": "2" }, ... ]
var nodes = [ { "Id": "1", "Name": "TEST NODE ONE", "Url": "http://www.google.com" }, ... ]

var cachedNodesById = {};
var linksBetweenNodeObjs = links.map(funciont(link) {
  return {
    source: nodeById(link.Source),
    target: nodeById(link.Target)
  };
});

function nodeById(id) {
  // return the node if it's been found before, otherwise loop over the
  // array to find it
  if(cachedNodesById[id] != null) { return cachedNodesById[id]; }
  else {
    for(var i=0; i < nodes.length; i++) {
      if(nodes[i].Id == id) { return cachedNodesById[id] = nodes[i]; }
    }
  }
}

尝试连接来自 "flat" JSON 的 D3 节点以制作公司层次结构图

Trying to connect D3 Nodes from "flat" JSON to make company heirarchy graph

javascript

json

graph

hierarchy

d3.js