making changes to svg element on the fly

Question

I'm new to react, here i have svg element which is not in my code as you can see code i have provided, but it is in console, i want to change those 'height: 569px;width: 800px;' to height: 100%;width: 100%; my problem is, that does not have className and neither and id, so how can i change those values ? the other one which is above it i have changed that using that id.

that svg element have just 'name'

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%;
}

console:

i dont know if this is reacts way, i have tried this:

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%');
      }
    });
  });

it doesnt affect it:

English is not my mother language so there could be mistakes.

Answer 1

You could change the inline style properties instead:

elem.style.width = '100%';
elem.style.height = '100%';

But I guess the graphs dimensions i.e. aspect ratio is also needed for a proper display. So adding a viewBox attribute might be a good idea:

elem.setAttribute('viewBox', '0 0 569 800');

Ideally you'll set these properties on creation/initialization.
See also: A simple way to make D3.js charts responsive