CODEWITHSUNDEEP
javascriptreactjssvgd3.js
WolF
WolF

Reputation: 51

React D3.js render multiple treemap charts

I builded a component in React to render 10 charts with D3.js

The container call an API that return an array with 10 objects, for each object I want to render a chart with the datas in the children key.

I have a map that print 10 tags with different dynamic id, in the component I have the logic to render the single chart with the data of each object in the list.

I'm selecting the <svg> tag with:

const svg = d3.select("svg").attr("id", `${data.name}`)

but the result is that I render only one chart with a lot of data inside, meanwhile all the others svg are empty.

Also debugging I'm not understanding whats going on...

Here a sandbox:

https://codesandbox.io/s/interesting-driscoll-0cy72?file=/src/component.js:221-277

Suggestions?

Upvotes: 0

Views: 499

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7220

You cannot select an element like this:

const svg = d3.select("svg").attr("id", `${data.name}`);

It's actually taking the first svg in the document and sets its id.

The correct way to select is:

const svg = d3.select(`#${data.name}`);

Upvotes: 1

Related Questions