尝试从“平面”JSON连接D3节点以制作公司层次结构图

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

本文关键字：节点 D3 制作公司 层次结构图 连接 JSON 平面      更新时间：2023-09-26

我正在尝试使用 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.stackoverflow.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"
        }
    ]

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

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

感谢您的帮助。

您需要将节点 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]; }
    }
  }
}
相关文章：