d3.js 使用React在D3中复制而不是移动元素

6rvt4ljy 于 2022-11-12 发布在 React

关注(0)|答案(1)|浏览(199)

当你点击一个按钮时，我试图移动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>
  );
}

页面加载：

单击按钮后：

d3.js

来源：https://stackoverflow.com/questions/71527112/elements-are-duplicated-instead-of-moved-in-d3-with-react

1条答案

按热度按时间

deyfvvtc1#

我认为您在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]);

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 使用React在D3中复制而不是移动元素

1条答案

相关问题

热门标签

最新问答