Скрытие корневого узла в дереве d3

Question

Скрытие корневого узла в дереве d3

1

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

Я успешно спрятал ссылки с корневого узла на него, добавив новый случай в функцию linkColor, установив цвет в белый цвет и присвоив этому colorCode дочерним элементам root.

Там, где я застрял, скрывается сам корневой узел. Я пробовал сделать его размером 0, но это исчезает и все дети, внуки и т.д. Узлы. И размер 1 все еще виден.

Я попытался перейти на маршрут javascript вместо маршрута данных и попробовал добавить атрибуты стиля, добавив классы, которые скрываются с помощью css, пропускают функции раскраски и т.д. Но основная проблема с javascript заключается в том, что я честно не могу понять как изолировать/НАЙТИ только корневой узел.

Вещи, которые я пробовал:

d3.json("example.com/mylink.json", function(error, flare) {
  edge_weight.domain([0,flare.size]);
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;
  root.attr("class", "root"); //I've tried this
  root.style("fill", "#ffffff"); //I've tried this
  root.circle.style("fill", "#ffffff"); //tried this
  root.children.forEach(collapse);
  update(root);
});

Я попытался повлиять на свойство узла и параметры/стиль, применяемые к узлам, но опять же, я не могу понять, как вытащить/идентифицировать только корень. Любая помощь/мысли оцениваются!

singmotor 31 окт. 2017, в 08:00

Источник

Теги:

javascript

d3.js

css

tree

nodes

1 ответ

Ещё вопросы

Gerardo Furtado · Answer 1 · 2017-10-31T05-27-00.000Z

root - это объект, содержащий данные дерева, а не корневой узел.

Чтобы скрыть корневой узел и сделать его незаметным, используйте глубину (корень имеет depth = 0)

.style("opacity", function(d, i) {
        return !d.depth ? 0 : 1;
    })
    .style("pointer-events", function(d, i) {
        return !d.depth ? "none" : "all";
    });

Для ссылок используйте ту же логику с depth:

.style("opacity", function(d, i) {
        return !d.source.depth ? 0 : 1;
    })
    .style("pointer-events", function(d, i) {
        return !d.source.depth ? "none" : "all";
    });

Поскольку вы не разместили свой код, вот bl.ocks, который вы поделились с этими изменениями: http://bl.ocks.org/anonymous/f29fa00c15a515cae95eb4699128cf03/d2c697b76c8e1e60af1a503b07dcdda94dcd3b2b