Несколько форсированных графов в 1 SVG (проблемы с отображением текста)

1

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

Моя первая мысль и с некоторыми исследованиями я просто сделал цикл for, переоценил массивы узлов/ребер и поместил это в функцию, которая генерирует ориентированный по силе граф.

 for (var i = 0; i < sampleData.length; i++)
{
            var nodes = [];     
    var edges = [];

            x = x+100; //update position (i want to show grpahs side by side.)          

    root = sampleData[i];

    nodes.push({"name": root, "x": x, "y": y, "fixed": true, "color": "purple"}); 

        //These 2 recurisve functions generate my nodes and edges array just fine. 
     buildParents(childs, parents, test, counter);         
     buildChildren(childs, parents, test, counter);

     //apply id to each node
        nodes.forEach((d,i)=>d.generatedId='id'+i);

            //build makes the force-directed layout.
        build(nodes, edges);

}

На самом деле это работает отлично для меня с моими узлами и ссылками. Моя проблема заключается в том, что текст не отображается для всех узлов, например, если я только передаю один набор данных. У меня есть текст, определенный в симуляции:

var nodes_text = svg.selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text")
        .attr("class", "nodetext slds-text-heading--label")
        .attr("text-anchor", "middle")
        .attr("dx", -20)
        .attr("dy", 20)
        .text(d=>d.name)
        .attr('opacity',0)

Я смог воспроизвести эту ошибку, просто создав 2 массива для узлов и 2 массива для ребер и передав их в симуляцию. Вот простая программа, которая воспроизводит мою ошибку: https://jsfiddle.net/mg8b46aj/9/

Я думаю, что исправление этого JFiddle даст мне правильную идею о том, как включить его в мою программу.

Поэтому я просто вызываю функцию сборки дважды (либо порядок - это ошибка). Левый узел имеет текст, но одно из них не является правильным текстовым полем. Кроме того, перетаскивая его немного, он "оставляет" свой текст позади. На правом графике ничего нет.

Изменить. И щелкнуть узел на правом графике, похоже, сбросит текстовые позиции.

Теги:
d3.js
svg

1 ответ

0
Лучший ответ

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

var nodes_text = svg.append('g') //Append new group for labels in new diagram 
        .attr("class", "labels")
        .selectAll(".nodetext")
        .data(nodes)
        .enter()
        .append("text");

Обновлен скрипт: https://jsfiddle.net/gilsha/qe7bbnwn/1/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню