D3中多个图表中的单个Y轴域

Question

我将使用D3从一个CSV文件创建多个图表。我想在每个图表中更新Y轴。现在所有图表的y轴都相同。它由整个number1列中的最大值设置，而不是由使用d3.nest。

创建的每个图表设置

如何使Y轴适合每个图表中的number1数据？

代码有什么问题？ JSbin

这是我的CSV数据：

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

Answer 1

我已将你的垃圾箱撞到here。基本上，我使用d3.selectAll.data(heroes).enter();模式添加了三个div和svgs。然后我使用forEach通过在您创建的对象中传入数组的每个元素，将轴和行添加到每个div / svg。请注意，由于某种原因，jsbin不会附加第一个svg元素。

然后将maxNumber值传递给foreach循环内的y轴构造函数，以及year / number1（x / y）值。 x / y值传递给单个行生成器，而不是三个单独的行函数，使事情变得更加整洁。

无论如何，希望这有帮助。