當您單擊按鈕時，我試圖在 D3 中移動元素。此代碼復制元素而不是移動它們。
import React, { useRef, useEffect, useState } from "react";
import { select } from "d3";
const svgSize = 500;
const initData = [
{ value: 3, x: 60, y: 60 },
{ value: 2, x: 40, y: 40 },
{ value: 1, x: 20, y: 20 },
];
export default function Home() {
const [data, setData] = useState(initData);
const svgRef = useRef();
const animate = () => {
setData(
data.map((item) => {
return {
value: item.value,
x: item.x 20,
y: item.y 20,
};
})
);
};
useEffect(() => {
const svg = select(svgRef.current);
svg
.selectAll("circle")
.data(data)
.join("text")
.text((value) => value.value)
.attr("x", (value) => value.x)
.attr("y", (value) => value.y);
}, [data]);
return (
<div>
<button onClick={animate}>Animate</button>
<div>
<svg width={svgSize} height={svgSize} ref={svgRef} />
</div>
</div>
);
}
在頁面加載時：
點擊按鈕后：
uj5u.com熱心網友回復：
我認為您在svg選擇節點時遇到問題，您正在嘗試selectAll('circle')但您需要選擇selectAll('text'). 因此，您繪制一個新text節點而不是移動它們。嘗試將您的更改useEffect為：
useEffect(() => {
const svg = select(svgRef.current);
svg.selectAll('text')
.data(data)
.join('text')
.text(({ value }) => value)
.attr('x', ({ x }) => x)
.attr('y', ({ y }) => y);
}, [data]);
如果要為移動添加影片，請添加：
useEffect(() => {
const svg = select(svgRef.current);
svg.selectAll('text')
.data(data)
.join('text')
.text(({ value }) => value)
.transition()
.duration(1000)
.attr('x', ({ x }) => x)
.attr('y', ({ y }) => y);
}, [data]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/452630.html