如何使用d3.js将JSON树形图可视化？

Question

简而言之

• 如何让径向整洁树与networkx的node_link_data(G[, attrs])或tree_data(G, root[, attrs])的JSON树数据配合使用？

• 如何让D3集群树状图与networkx的node_link_data(G[, attrs])或tree_data(G, root[, attrs])的JSON树数据配合使用？

• 如何让D3整洁树与networkx的node_link_data(G[, attrs])或tree_data(G, root[, attrs])的JSON树数据配合使用？

这些示例不使用JSON格式，而是使用类似CSV的输入格式。

详细说明

你好，

我正在使用Python和networkx生成图形数据（大多数是树状结构）。 我可以使用networkx函数将数据导出为JSON，这些函数在它们的页面中提到：

• node_link_data(G[, attrs])：以节点链接格式返回数据，适合于JSON序列化和在Javascript文档中使用。
• adjacency_data(G[, attrs])：以邻接格式返回数据，适合于JSON序列化和在Javascript文档中使用。
• tree_data(G, root[, attrs])：以树状格式返回数据，适合于JSON序列化和在Javascript文档中使用。

networkx的文档明确提到：

像d3.js示例https://bl.ocks.org/mbostock/4063550中的树状结构

然而，链接的示例似乎没有使用JSON树格式，而是使用了csv类型的输入。由于我的javascript技能基本为零，我不知道如何使用Mike Bostock的示例来处理我拥有的JSON数据。你能帮忙吗？

JSON示例

{
  "issueid": "3295658",
  "issuetype": "Portfolio-Epic",
  "status": "In Progress",
  "pirank": 24,
  "id": "ATROB-2523",
  "children": [
    {
      "issueid": "3288189",
      "issuetype": "Epic",
      "status": "Implementation",
      "id": "ATTDATA-233",
      "children": [
        {
          "issueid": "3305730",
          "issuetype": "Task",
          "status": "Implementation",
          "id": "ATTDATA-363"
        },
        {
          "issueid": "3305723",
          "issuetype": "Task",
          "status": "Open",
          "id": "ATTDATA-361"
        },
        {
          "issueid": "3301728",
          "issuetype": "Task",
          "status": "Open",
          "id": "ATTDATA-336"
        },
        {
          "issueid": "3297381",
          "issuetype": "Task",
          "status": "Closed",
          "id": "ATTDATA-300"
        },
        {
          "issueid": "3295913",
          "issuetype": "Task",
          "status": "Review",
          "id": "ATTDATA-290"
        },
        {
          "issueid": "3295893",
          "issuetype": "Task",
          "status": "Open",
          "id": "ATTDATA-289"
        },
        {
          "issueid": "3291658",
          "issuetype": "Task",
          "status": "Closed",
          "id": "ATTDATA-256"
        },
        {
          "issueid": "3291653",
          "issuetype": "Task",
          "status": "Closed",
          "id": "ATTDATA-255"
        },
        {
          "issueid": "3291530",
          "issuetype": "Task",
          "status": "Open",
          "id": "ATTDATA-253"
        },
        {
          "issueid": "3290232",
          "issuetype": "Task",
          "status": "Open",
          "id": "ATTDATA-247"
        },
        {
          "issueid": "3287061",
          "issuetype": "Task",
          "status": "Resolved",
          "id": "ATTDATA-226"
        }
      ]
    },
    {
      "issueid": "3300899",
      "issuetype": "Request",
      "status": "REJECTED",
      "id": "ATI-1478"
    }
  ]
}

- hcc23

---

你能分享一个简单树形结构的输出JSON示例吗？比如说3-8个节点。 - Andrew Reid

如果你的Python技能很好，那么快速阅读Mozilla网站上有关如何在JavaScript中实现它的内容不会成为问题。 - rioV8

@rioV8：抱歉，我两周前才重新开始学习Python... :/ 你能加个链接让我可以开始阅读吗？谢谢 :) - hcc23

Answer 1

迈克·博斯托克（Mike Bostock）的链接示例使用 d3.stratify将CSV数据转换为分层形式：

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

[... later in the code...]


var root = tree(stratify(root));

在您的情况下，您的数据已经是分层形式，因此您可以通过d3.hierarchy将其转换为d3类型层次结构，然后创建一个图表：

var root = tree(d3.hierarchy(data));

您还需要更改从d3.csv获取数据的函数，改为使用d3.json：

// assume your data is in `data.json`
d3.json("data.json", function(error, data) {

现在脚本的顶部看起来像这样：

<script type="text/javascript">

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

var tree = d3.tree()
    .size([2 * Math.PI, 300])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

d3.json("data.json", function(error, data) {
  if (error) throw error;

  var root = tree(d3.hierarchy(data));

这里是一个.block，包含了你提供的JSON数据生成的树状图。

- i alarmed alien

---

谢谢，@i-alarmed-alien。这个答案直接帮助我解决了我的问题（尽管我分心了几个月...）感谢您的发布，特别是展示实现的.block！ - hcc23