0
101
Viewshacer cambios en el elemento svg sobre la marcha
Soy nuevo en reaccionar, aquí tengo un elemento svg que no está en mi código, como puede ver el código que proporcioné, pero está en la consola, quiero cambiar esos 'alto: 569px; ancho: 800px;' a altura: 100%; ancho: 100%; mi problema es que no tiene className y tampoco id, entonces, ¿cómo puedo cambiar esos valores? el otro que está arriba lo he cambiado usando esa identificación.
ese elemento svg solo tiene 'nombre'
const _zoomConfig = () => { const z = d3Select(`#graph-id-graph-wrapper`) .call(d3Zoom() as any) .on('wheel.zoom', null) .on('dblclick.zoom', null) .on('mousedown.zoom', null) .on('touchstart.zoom', null) .on('touchmove.zoom', null) .on('touchend.zoom', null); }; useEffect(() => { _zoomConfig(); }); #graph-id-graph-wrapper { /* margin-left: -100%; */ width: 100%; height: 100%; }consola:
No sé si esto es una forma de reaccionar, he intentado esto:
useEffect(() => { const k = Array.from(document.getElementsByTagName('svg')).map( (elem) => elem, ); k.map((elem) => { if (elem.getAttribute('name') === 'svg-container-graph-id') { elem.setAttribute('height', '100%'); elem.setAttribute('width', '100%'); } }); }); no le afecta: 
El inglés no es mi lengua materna, por lo que podría haber errores.
1 answers
Answer question0
En su lugar, podría cambiar las propiedades de estilo en línea:
elem.style.width = '100%'; elem.style.height = '100%'; Pero supongo que las dimensiones de los gráficos, es decir, la relación de aspecto, también son necesarias para una visualización adecuada. Entonces, agregar un atributo viewBox podría ser una buena idea:
elem.setAttribute('viewBox', '0 0 569 800'); Idealmente, establecerá estas propiedades en la creación/inicialización.
Ver también: Una forma sencilla de hacer que los gráficos de D3.js respondan