Question

62

Implementing multiple D3 layout on same page

rated 0 times [ 64] [ 2] / answers: 1 / hits: 5209 / 8 Years ago, mon, november 21, 2016, 12:00:00

I tried to add multiple D3 graphs on same page i.e. Pie Chart, Bar Graph and a tree layout using different data in either CSV or JSON format. But I am not able to implement all of these 3 graphs on the same page. When I link more than 1 layout on a same page, I get a blank page.

I tried to append each chart in a different div using following HTML and JS

HTML

<div id=piediv></div>

<div id=bardiv></div>

<div id=treediv></div>

JS

var svg = d3.select(#piediv).append(svg)

var svg = d3.select(#bardiv).append(svg)

var svg = d3.select(#treediv).append(svg)

All of the JS lines above are in their respective individual JS files viz. pie.js, bar.js and tree.js

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

briza

Add To Favorites

Follow

Total Points: 259

Total Questions: 94

Total Answers: 101

Location: Reunion

Member since Mon, Dec 28, 2020

3 Years ago

answered 8 Years ago kareem · Accepted Answer

First of all i suggest you to declare svg variables with a different names.

I made a fiddle for you with a similar problem; more in details, I have created two donut charts in the same page in this way:

I have created two different <div> with two different ids

<div id=chart></div>

<div id=chart2></div>

and I also created two different svgs (with different name)

var svg = d3.select(#chart).append(svg)

    .attr(width, width)

    .attr(height, height)

    .append(g)

    .attr(transform, translate( + width / 2 + , + height / 2 + ));



var svg2 = d3.select(#chart2).append(svg)

   .attr(width, width)

   .attr(height, height)

   .append(g)

   .attr(transform, translate( + width / 2 + , + height / 2 + ));

Check the fiddle for more details

Let me know.