5

D3に問題があり、ウィットエンドに到達しています。基本的に、任意の数の線を含む時系列グラフがあり、ソースデータを事前に変更することはできません（ただし、クライアント側で操作することはできます）。

データは次のようにフォーマットされます（任意の数のラベルを使用）。

object = [
{
  "_id": "2012-08-01T05:00:00",
  "value": {
    "label1": 1.1208746110529344,
    "label2": 0.00977592175310571
  }
},
{
  "_id": "2012-08-15T05:00:00",
  "value": {
    "label1": 0.7218920737863477,
    "label2": 0.6250727456677252
  },
  ....

私は次のようなことを試しました：

var vis = d3.select.(element)
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

var line = d3.svg.line()
    .x(function(data) {return x(new Date(data._id));})
    .y(function(data) {return y(data.value);});


vis.append("svg:path")
    .attr("d", line(object))
    .attr("stroke", "black");

「エラー：問題の解析」と多くの「NaNL3.384615384615385、NaNL6.76923076923077、NaNL10.153846153846155」が表示されるため、yアクセサーを介して正しい値にアクセスできないようです。ただし、次のような方法でラベル値をハードコーディングすると、次のようになります。

.y(function(data) {return y(data.value.label1);});

それは問題なく動作しますが、1行だけです。誰か助けてもらえますか？

4

2 に答える 2

7

まず、データを同じ形式の並列配列に変換します。

var series = ["label1", "label2"].map(function(name) {
  return data.map(function(d) {
    return {date: new Date(d._id), value: d.value[name]};
  });
});

(上記のようにシリーズ名をハードコーディングするのではなく、d3.keysseriesを使用してシリーズ名を自動的に計算できます。)配列の配列になりました。label1 などの単一のシリーズは、次のようになります。

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344},
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477},
…

これらは同じ形式であるため、すべてのシリーズで同じライン ジェネレータを使用できます。

var line = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y(d.value); });

同様に、ネストされた配列は、必要なパス要素を作成するためのデータ結合に適しています。

svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line);
于 2012-08-23T03:29:33.783 に答える
1

parseFloat を組み込んで、暗黙的に int ではなく float に変換していることを確実に確認してください。それでもうまくいかない場合は、うまくいくまで文字列の部分文字列を取得してみてください (一部の精度を切り落とします)。

于 2012-08-22T23:14:33.360 に答える