Как использовать d3.js для визуализации дерева JSON-графа?

Question

ТЛ; др

• Как заставить Radial Tidy Tree работать с данными дерева JSON из networkx * node_link_data(G[, attrs]) или tree_data(G, root[, attrs])?

• Как заставить дендрограмму кластера D3 работать с данными дерева JSON из networkx node_link_data(G[, attrs]) или tree_data(G, root[, attrs])?

• Как заставить D3 Tidy Tree работать с данными дерева JSON из networkx node_link_data(G[, attrs]) или tree_data(G, root[, attrs])?

В примерах используется не формат JSON, а ввод в стиле CSV.

Длинная версия

Привет

Я использую Python и networkx для генерации графических данных (которые в основном древовидные). Я могу экспортировать данные в JSON с помощью функций networkx, упомянутых на на их странице :

• node_link_data(G[, attrs]): возвращать данные в формате узла-ссылки, который подходит для сериализации JSON и использования в документах Javascript.
• adjacency_data(G[, attrs]): возвращать данные в формате смежности, который подходит для сериализации JSON и использования в документах Javascript.
• tree_data(G, root[, attrs]): возвращать данные в древовидном формате, который подходит для сериализации JSON и использования в документах Javascript.

В документации по сети x явно упоминается:

дерево, как в примере с d3.js https://bl.ocks.org/mbostock/4063550

Тем не менее, связанный пример , похоже, не использует формат дерева JSON, а использует тип ввода csv . Поскольку мой javascript-skilz по существу равен нулю, я не понимаю, как заставить пример Майка Бостока работать с данными 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"
    }
  ]
}

Answer 1

Связанный пример Майка Бостока преобразует данные CSV в иерархическую форму, используя d3.stratify :

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, которые вы предоставили выше.