我试着用D3在时间线上创建一个画笔交互,并做出react ,但我不明白为什么它不起作用.

一切看起来都很好,但是当我在useEffect()内设置一个状态时,index变量会创建一个无限循环.

    const Timeline = () => {
    const svgRef = useRef(null!);
    const brushRef = useRef(null!);
    const x = scaleLinear().domain([0, 1000]).range([10, 810]);
    const [pos, setPos] = useState([]);

    useEffect(() => {
        const svg = select(svgRef.current);

        svg.select('.x-axis')
            .attr('transform', `translate(0,${110})`)
            .call(axisBottom(x));

        const brush = brushX()
            .extent([
                [10, 10],
                [810, 110],
            ])
            .on('start brush end', function () {
                const nodeSelection = brushSelection(
                    select(brushRef.current).node(),
                );
                const index = nodeSelection.map(x.invert);

                setPos(index);
            });

        console.log(pos);

        select(brushRef.current).call(brush).call(brush.move, [0, 100].map(x));
    }, [pos]);

    return (
        <svg ref={svgRef} width="1200" height={800}>
            <rect x={x(200)} y={10} width={400} height={100} fill={'blue'} />
            <g className="x-axis" />
            <g ref={brushRef} />
            <text>{pos[0]}-{pos[1]}</text>
        </svg>
    );
};

有什么办法解决这个问题吗? 谢谢!

推荐答案

这似乎解决了问题:

const runBrushes = useCallback(async () => {
    const brush = brushX()
        .extent([
            [10, 10],
            [810, 110],
        ])
        .on('start brush end', function () {
            const nodeSelection = brushSelection(
                select(brushRef.current).node(),
            );
            const index = nodeSelection.map(x.invert);

            setPos(index);
        });

    select(brushRef.current).call(brush).call(brush.move, [0, 100].map(x));
}, [pos, x]);

useEffect(() => {
    const svg = select(svgRef.current);

    svg.select('.x-axis')
        .attr('transform', `translate(0,${110})`)
        .call(axisBottom(x));

    runBrushes().catch(console.error);
}, []);

Javascript相关问答推荐

setcallback是什么时候放到macrotask队列上的?

使用VUE和SCSS的数字滚动动画(&;内容生成)

同一类的所有div';S的模式窗口

JavaScript不重定向配置的PATH

如何使用Astro优化大图像?

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

如果NetSuite中为空,则限制筛选

FireBase FiRestore安全规则-嵌套对象的MapDiff

Pevent触发material 用户界面数据网格中的自动保存

如何正确地在ComponentWillUnmount中卸载状态以避免内存泄漏?

限制数组中每个元素的长度,

将字体样式应用于material -UI条形图图例

使用静态函数保存 node 前的钩子

我如何才能让p5.js在不使用实例模式的情况下工作?

MAT-TREE更多文本边框对齐问题

如何在函数组件中保留对计时器的引用

Js问题:有没有办法将数据从标记表转换成图表?

我们如何创建自己的React.js组件作为CDN链接?

JS函数返回未定义的值,即使返回值有效

素材界面如何让自动完成弹出框不受菜单限制