Estoy tratando de crear una interacción de pincel en una línea de tiempo con D3 y React, pero no puedo entender por qué no funciona.
Todo parece estar bien, pero cuando configuro un estado dentro de useEffect() , la variable index crea un bucle infinito.
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> ); };¿Alguna idea para arreglar eso? ¡Gracias!
Parece que esto resuelve el problema:
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); }, []);