0
106
Viewsmaking changes to svg element on the fly
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.
1 answers
Answer question0
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