javascript - 使用D3.js的多个区域图

我正在将几个d3js库集成到我的项目中，在这一步中，我想绘制一个多区域图，该图显示时间函数中5（x，y，z，r，e）个点的值（0到100％之间）像这样：http://tympanus.net/Tutorials/MultipleAreaChartsD3/ ...在我的情况下，输入是一个数组

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"}];

如我的代码中定义的那样：http://jsfiddle.net/amani1988/cfk8Y/我只是编辑了原始代码的几行，但是在显示y，z，r，e值时也存在问题，还有css问题..问题是如何从数组形式正确读取数据？

最佳答案

好吧，您似乎已经从我看到的内容中正确读取了数据。我将您的小提琴分叉为here，我所做的只是更改了一些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

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

  this.chartContainer.append("path")
                      .data([this.chartData])
                      .attr("class", "chart")
                      .attr("clip-path", "url(#clip-" + this.id + ")")
                      .attr("d", this.area)
                      .attr("fill", function (d,i) { return colours(options.id); });

填充或颜色是通过自定义函数使用选项中的id和颜色的序数标度（基于Color Brewer，来自d3的内置色标之一）定义的，定义为：

var colours = d3.scale.category20();

您需要将其声明为全局变量，以便可以在Chart函数中访问它。您可以阅读更多有关here的天平秤。

我已经用这个更新了fiddle。