を使用して力有向グラフを作成しました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つの方法は次のとおりです。
useEffect
変数を(再)定義するときに、の各実行の開始時にSVGを空にしますsvg
。以下に示すよう.html('')
に、既存のSVGノードを空にします。
const svg = d3
.select(d3Container.current)
.html("")
.attr("viewBox", "0 0 " + w + " " + h)
.attr("preserveAspectRatio", "xMidYMid meet");
より洗練されたアプローチは、関数がチャートを初期化し、2番目の関数がグラフを(再)生成するようにコードを更新することです。reactについての私の理解は、これはとを使用componentDidMount
して行われるということですcomponentDidUpdate
。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加