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

好吧，你似乎已经从我能看到的内容中正确读取了数据。我把你的小提琴分到here，我所做的就是改变一些css以反映变量名，即我将国家改为x，y，z，t，e，如：

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

我做的唯一其他更改是maxDataPoint，其中包括最大计算中的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。

带有D3.js的多区域图表

1 个答案: