Javascript 使用D3.js的多区域图表

我在我的项目中集成了一些d3js库，在这一步中，我想画一个多区域图，显示5个（x，y，z，r，e）点随时间变化的值（0到100%），如下所示：……在我的例子中，输入是一个数组

var data =  
 [{"Year":"2011","x":"63.4","y":"62.7","z":"12.2","t":"44.2","e":"22.2"},              
 {"Year":"2012","x":"75.4","y":"32.7","z":"78.2","t":"82.2","e":"92.2"},  
 {"Year":"2013","x":"773.4","y":"20.7","z":"92.2","t":"75.4","e":"52.2"}];

---

正如我的代码中所定义的：我刚刚编辑了原始代码的一些行，但在显示y、z、r、e值时也有问题，还有css问题。问题是如何从数组形式中读取数据？

从我看到的情况来看，您似乎已经正确地读取了数据。我把你的小提琴交给了，我所做的只是更改了一些css以反映变量名称，即我将国家更改为x、y、z、t、e，如：

g.x path.chart{
      fill: rgb(127,201,127);
    }

我所做的唯一其他更改是对maxDataPoint的更改，它在max的计算中包括了Year列，因此我只是在if语句中排除了它，如中所示：

data.forEach(function(d) {
  for (var prop in d) {
    console.log(d[prop])
    if (d.hasOwnProperty(prop)) {
      d[prop] = parseFloat(d[prop]);
    if (d[prop] > maxDataPoint && prop !== "Year") {
      console.log(prop)
      maxDataPoint = d[prop];
    }
  }
};

我想这就是你想要的

EDIT

要添加颜色，需要将填充属性添加到路径生成中，如（最后一行）：

填充或颜色通过自定义功能定义，使用选项中的id和颜色的顺序刻度（d3中基于Color Brewer的内置颜色刻度之一），定义如下：

var colours = d3.scale.category20();

您需要将其声明为全局，以便可以在图表函数中访问它。你可以阅读更多的顺序音阶

---

我已经用这个更新了。

Thx:）是的，它可以工作，因为我修复了它，这只是一个小错误：）但是我想知道如何在css代码中不写x，y，z…的情况下拥有一个多色图，因为输入数组会随时间变化，所以我不想在css中输入动态变化的值，如何做到？我们可以给evry chart一个ID，然后从css中引用该ID吗？

var colours = d3.scale.category20();