Individual Y axis domain in multiple charts in D3

Question

I will create multiple charts from one CSV-file using D3. I want the the Y axis du update in each chart. Now the y axis is the same for all charts. It is set by the maximum value in the whole number1 column, and not for each chart created with d3.nest.

How can i make the Y axis fit to the number1 data in each chart?

What is wrong with the code? JSbin

This is my CSV-data:

name,year,number1,number2,number3

Superman,2003,227141296,214978953,212418250 <-- number1 should be max for Superman chart
Superman,2004,232769230,220606887,211301729
Superman,2005,192769230,220606887,211301729
Batman,2003,252873171,239836381,225174161 <-- number1 should be max for Batman chart
Batman,2004,286137492,262439880,243001175
Batman,2004,232769230,220606887,211301729
Spiderman,2006,809584667,279490239,248758932 <-- number1 is now max in every chart
Spiderman,2007,324081833,278022620,246734614
Spiderman,2008,294081833,278022620,246734614

user1614080 user1614080 · Accepted Answer · 2015-03-06T10:22:28

I've bumped your bin to here. Essentially, I added three divs and svgs using the d3.selectAll.data(heroes).enter();pattern. I then used the forEach to add in the axis's and line to each div / svg by passing in each element of the array in the object you created. Note that for some reason, jsbin isn't appending the first of the svg elements.

The maxNumber values was then passed to the y-axis constructor inside the foreach loop as were the year / number1 (x/y) values. The x/y values were passed to a single line generator, instead of the three separate line functions, making things a bit tidier.

Anyhow, hope this helps.

Individual Y axis domain in multiple charts in D3

1 Answers