Как добавить только новые узлы в силовой ориентированный граф d3? - PullRequest
Новая
       33

Как добавить только новые узлы в силовой ориентированный граф d3?

1 голос
/ 28 марта 2020

Я создал силовой ориентированный граф с использованием d3, который выполняет рендеринг в компоненте react с использованием хука useEffect. График изначально отображается правильно, но если он повторно отображается / обновляется новыми узлами, отправляемыми через форму ввода, существующие узлы дублируются.

Я думал, что существующие узлы будут оставлены в покое, и только новые узлы будут созданы после .enter(), что явно не происходит. Любая помощь с тем, где я иду не так?

Редактировать 1: это пример данных, поступающих в 

var nodesData = [
{"id": "Do Something", "type": "activity"},
{"id": "My Document", "type": "object"}
]

Это код для графика : 

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
import '../../custom_styles/bpForceDirected.css';

interface IProps {
    data?: string;
    linkData?: string;
}

/* Component */
export const BpForceDirectedGraph = (props: IProps) => {

    const d3Container = useRef(null);

    /* The useEffect Hook is for running side effects outside of React,
       for instance inserting elements into the DOM using D3 */
    useEffect(
        () => {
            if (props.data && d3Container.current) {
                var w=500;
                var h=500;
                const svg = d3.select(d3Container.current)
                            .attr("viewBox", "0 0 " + w + " " + h )
                            .attr("preserveAspectRatio", "xMidYMid meet");

                var simulation = d3.forceSimulation()
                    .nodes(props.data);
                simulation
                    .force("charge_force", d3.forceManyBody())
                    .force("center_force", d3.forceCenter(w / 2, h / 2));

                function circleColor(d){
                    if(d.type ==="activity"){
                        return "blue";
                    } else {
                        return "pink";
                    }
                }

                function linkColor(d){
                    console.log(d); 
                    if(d.type === "Activity Output"){
                        return "green";
                    } else {
                        return "red";
                    }
                }

                //Create a node that will contain an object and text label      
                var node = svg.append("g")
                  .attr("class", "nodes")
                  .selectAll("g")
                  .data(props.data)
                  .enter()
                  .append("g");

                node.append("circle")
                        .attr("r", 10)
                        .attr("fill", circleColor);

                node.append("text")
                    .attr("class", "nodelabel")
                    .attr("dx", 12)
                    .attr("dy", ".35em")
                    .text(function(d) { return d.activityname });

                // The complete tickActions() function    
                function tickActions() {
                //update circle positions each tick of the simulation 
                    node.attr('transform', d => `translate(${d.x},${d.y})`);

                //update link positions 
                //simply tells one end of the line to follow one node around
                //and the other end of the line to follow the other node around
                    link
                        .attr("x1", function(d) { return d.source.x; })
                        .attr("y1", function(d) { return d.source.y; })
                        .attr("x2", function(d) { return d.target.x; })
                        .attr("y2", function(d) { return d.target.y; });
                }  

                  simulation.on("tick", tickActions );

                //Create the link force 
                //We need the id accessor to use named sources and targets 
                var link_force =  d3.forceLink(props.linkData)
                    .id(function(d) { return d.id; })

                simulation.force("links",link_force)

                //draw lines for the links 
                var link = svg.append("g")
                    .attr("class", "links")
                    .selectAll("line")
                    .data(props.linkData)
                    .enter().append("line")
                        .attr("stroke-width", 2)
                        .style("stroke", linkColor);

                // Remove old D3 elements
                node.exit()
                    .remove();
            }
        },

        [props.data, props.linkData, /*d3Container.current*/])

    return (
        <svg
            className="d3-component"
            ref={d3Container}
        />
    );
}

export default BpForceDirectedGraph;

Редактировать 2: Пример воспроизводимого кода

1 Ответ

1 голос
/ 29 марта 2020

Проблема возникает из-за того, что функция, генерирующая диаграмму, вызывается при каждом обновлении и не учитывает существующее содержимое.

Вот один из способов решения проблемы:

Пусто SVG в начале каждого выполнения useEffect, когда (пере) определяем переменную svg. Как показано ниже, .html('') очищает существующие узлы SVG. 

  const svg = d3
    .select(d3Container.current)
    .html("")
    .attr("viewBox", "0 0 " + w + " " + h)
    .attr("preserveAspectRatio", "xMidYMid meet");

Более элегантный подход заключается в обновлении кода таким образом, чтобы функция инициализировала диаграмму, а вторая (повторно) сформировала график Мое понимание реакции состоит в том, что это делается с использованием componentDidMount и componentDidUpdate.

...