Анимация и управление D3 JS Узлами и связями разборного дерева - PullRequest
Новая
       32

Анимация и управление D3 JS Узлами и связями разборного дерева

0 голосов
/ 20 февраля 2020

Дополнения к решению, приведенному здесь -> - возможно ли рисовать пунктирные ссылки только для дочерних узлов на дочерние узлы структуры дерева в d3 js

В приведенном выше примере I внесены небольшие изменения в CSS для анимации перехода. Изменения CSS, приведенные ниже, 

.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,10,5,5,5,10;
    animation: dash 5s linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes dash {
    to {
        stroke-dashoffset: 250;
    }
}

, которые анимируют штрихи и показывают движение в качестве пути вперед или назад. Пример демонстрации приведен здесь . Однако мне нужно иметь возможность контролировать, какие пунктирные линии движутся? Мне нужно иметь возможность контролировать, какие пунктирные линии перемещаются между узлами и соединениями между различными узлами, чтобы я мог управлять там анимациями. Я просмотрел d в приведенном ниже коде 

var link = svg.selectAll(".link")
        .data(links)
       .enter()
        .append("path")
        .attr("class", function (d) { return (d.source != root) ? "link_dashed" : "link_continuous" ; })
        .attr("d", diagonal);

, но я не уверен, нужно ли мне контролировать источник или назначение и могу ли я прикрепить стиль к нему для каждого источника? Как я могу контролировать только один узел и его соединения?

1 Ответ

0 голосов
/ 20 февраля 2020

Я только что внес некоторые изменения в свою собственную кодовую базу. Оказалось, что мое предположение было верным. Не уверен, что он может быть еще более мелким, но этот пример контролирует весь узел на более высоком уровне. изменение кода приведено ниже, 

var link = svg.selectAll(".link")
        .data(links)
        .enter()
        .append("path")
        .attr("class", function (d) { return (d.source != root && d.source.children[0].name != 'AgglomerativeCluster') ? "link_dashed" : "link_continuous" ; })
        .attr("d", diagonal);
...