使用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

好吧，您似乎已經從我看到的內容中正確讀取了數據。 我將您的小提琴分叉到了這里 ，我所做的就是更改了一些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函數中訪問它。 您可以在此處閱讀有關序數表的更多信息 。

我已經用這個更新了小提琴 。