0

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

4

1 回答 1

0

好吧，从我所见，您似乎已经正确读取了数据。我把你的小提琴分叉到这里，我所做的只是更改了一些 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

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

  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 函数中访问它。您可以在此处阅读有关序数刻度的更多信息。

我已经用这个更新了小提琴。

于 2013-10-15T03:24:45.397 回答