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);
    }

私が行った他の唯一の変更は、max の計算に Year 列を含めていた maxDataPoint に対するものだったので、次のように 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 の組み込みカラー スケールの 1 つ) を使用して、カスタム関数によって定義されます。

var colours = d3.scale.category20();

Chart関数でアクセスできるように、これをグローバルとして宣言する必要があります。序数スケールの詳細については、こちらを参照してください。

これでフィドルを更新しました。

于 2013-10-15T03:24:45.397 に答える