0

d3を使用してパスを生成し、データセットごとに色を設定しようとしています。パスの色は「Req」で設定され、パスはポイントのセットで描画されますが、データを取得するときに解析の問題が発生します。私のデータフォーマットは以下のようになりました。

var feature = {"section":[
  {"ID": 1,"Req": 10,"Name": "Jame","point": [{"x": 1,"y": 1},{"x": 5,"y": 5},{"x": 20,"y": 30},{"x": 200,"y": 200}]},
  {"ID": 2,"Req": 20,"Name": "John","point": [{"x": 1,"y": 1},{"x": 7,"y": 10},{"x": 100,"y": 10},{"x": 20,"y": 200}]}  
]};

データセット内のxとyの座標を取得するために、次のようなラインジェネレータの機能があります。

var line = d3.svg.line()
     .interpolate("linear")
     .x(function(d) { d.point.forEach(function(a){ return a.x;});})
     .y(function(d) { d.point.forEach(function(a){ return a.y;});});

データセットに「Req」の値でパスのスタイルカラーを設定しました。

canvas.selectAll("path")
    .data(feature.section)
    .enter()
    .append("path")
    .attr("d", line(feature.section))
    .attr("fill", "none")
    .style("stroke", function(d) {
       var returnColor;
       if (d.Req > 5){returnColor ="green";}
       else if (d.Req > 10){returnColor ="purple";}
       else if (d.Req > 15){returnColor ="red";}
       else{returnColor = "#ccc";}
       return returnColor;
    });

しかし、画面に線が表示されていません。デバッグコンソールに常にエラーが表示されました：d = "MNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaN"の解析に問題があります

私は何か見落としてますか？

このコードの私の例はhttp://jsfiddle.net/agadoo/RZQxV/にもあります。

4

1 に答える 1

0

リクエスト ID ごとに 1 つずつ、複数のパスを描画しようとしているようです。この場合に必要なのは、ネストされた選択です。

パスを描画するには、.data()関数に配列を渡し、定義で 関数xとy関数を指定してd3.svg.line()、その配列の各要素から関連するデータを抽出します。つまり、そこで指定する関数は、正確に 1 点のxとy座標を返す必要があります。したがって、それらを次のように変更します

.x(function(d) { return d.x; })

ここでjsfiddle を変更しました。このシナリオでは、そのデータがそのレベルで利用できないため、以前と同じ方法で線の色を取得できないことに注意してください。これを克服する方法はいくつかありますが、最も簡単なのはおそらくデータを再フォーマットすることです。ここでは、d3 配列関数 (特にd3.nest()functions ) が役立ちます。

最後に、線の色を設定するためのチェックが期待どおりに機能しません。d.Req > 5の場合は true になるd.Req > 10ため、最初の条件で既にカバーされているため、2 番目と 3 番目の条件が満たされることはありません。

于 2013-03-09T12:09:31.223 に答える