javascript - 使用 D3.js 的多面积图

Question

我在我的元素中集成了一些 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 问题。问题是如何从数组形式中正确读取数据？

Answer 1

好吧，据我所知，您似乎已经正确读入了数据。我把你的 fiddle fork 到 here我所做的只是更改一些 css 以反射(reflect)变量名称，即我将国家/地区更改为 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

要添加颜色，您需要将填充属性添加到路径生成中，如(最后一行)所示:

  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有了这个。