D3線グラフ（任意のデータ形式）

Question

D3に何らかの問題があり、私の気分が悪いです。基本的には、私は任意に多くの行を持つ時系列グラフを持っています。ソースデータは手作業で修正することはできません（ただし、クライアント側で操作できます）。

データは、（任意に多くのラベル付き）thuslyフォーマットされます。yアクセサなどを経由して、正しい値にアクセスすることができないようだ

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

：

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 
    }, 
    .... 

私のようなものを試してみました私は "エラー：問題の解析"と多くの "NaNL3.384615384615385、NaNL6.76923076923077、NaNL10.153846153846155"を取得します。私のようなものを経由してラベル値をハードコーディング場合は：

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

それだけで正常に動作しますが、唯一の1ライン分。誰でも助けてくれますか？

Answer 1

私は、同じ形式の並列配列にデータを変換することによって開始したい：今（あなたは、むしろ上記のように、それらをハードコーディングするよりも、自動的にシリーズ名を計算するためにd3.keysを使用することができます。）

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

seriesは配列の配列です。

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

と同様に、ネストされたようにLABEL1のような単一のシリーズは、このようになります。配列は、必要なパス要素を作成するためのデータ結合に適しています。

svg.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

Answer 2

parseFloatを組み込み、明示的にint型ではなくfloat型に変換するようにしてください。それでも動作しない場合は、動作するまで文字列の部分文字列を取り除いてみてください（精度が低下します）。