D3 Набор деревьев с принудительным направлением Глубина узлов - PullRequest
Новая
       8

D3 Набор деревьев с принудительным направлением Глубина узлов

0 голосов
/ 17 ноября 2018

Я работаю над созданием дерева, ориентированного на силу (это отличается от обычного расположения дерева!). Пока у меня есть базовый сило-ориентированный граф, но я хотел бы вычислить глубину каждого из узлов на основе их расстояния от корневого узла, а затем заставить их тяготеть к определенной оси y в направлении этой глубины.

Я бы хотел, чтобы это выглядело как в примере здесь

Я уже знаю, что должен изменить свои данные, чтобы иметь иерархическую структуру, как показано ниже: 

var children_data = {
    "id": "A", 
  "children": [
    {"id": "G"},
    {"id": "E"},
    {"id": "C"},
    {"id": "H"},
    {"id": "B", 
    "children": [
        {"id": "F"},
        {"id": "D"},
    ]},
  ]
};

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

var ky = 1.2 * e.alpha;
    links.forEach(function(d, i) {
      d.target.y += (d.target.depth * 120 - d.target.y) * ky;
    });

и добавить глубину к каждому узлу, где узел был определен как плоский (children_data): 

  function flatten(json) {
  var nodes = [];
  function recurse(node, depth) {
    if (node.children) {
      node.children.forEach(function(child) {
        recurse(child, depth + 1);
      });
    }
    node.depth = depth;
    nodes.push(node);
  }
  recurse(json, 1);
  return nodes;
}

Но я продолжаю получать ошибки в макете дерева. Мой очень простой и сломанный JSFiddle - здесь . Это особенно ломается на линии 70, 

var links = d3.tree().links(flatten(children_data));
...