2016-03-31 17 views
3

を使用しながら、パスは私はこのようなバックエンドからデータを取得しています完全な値を描画されていません。(。。データは0値を持っている私は、ドローラインからこれらの値を防止していますので)d3js - `defined`

[{"ActualPercentage":5.5,"PlanPercentage":10,"Week":"\/Date(1438376400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":10.5,"PlanPercentage":15,"Week":"\/Date(1441054800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":15,"PlanPercentage":20,"Week":"\/Date(1443646800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":24.129,"PlanPercentage":30,"Week":"\/Date(1446325200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":27.3,"PlanPercentage":31,"Week":"\/Date(1448917200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":30.5,"PlanPercentage":33.014,"Week":"\/Date(1451595600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":33,"PlanPercentage":36.532,"Week":"\/Date(1454274000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":41.246,"Week":"\/Date(1456779600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":44.781,"Week":"\/Date(1459458000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":48.316,"Week":"\/Date(1462050000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":53.03,"Week":"\/Date(1464728400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":57.158,"Week":"\/Date(1467320400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":60.148,"Week":"\/Date(1469998800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":64.868,"Week":"\/Date(1472677200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":69.528,"Week":"\/Date(1475269200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":73.653,"Week":"\/Date(1477947600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":78.956,"Week":"\/Date(1480539600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":84.053,"Week":"\/Date(1483218000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":88.392,"Week":"\/Date(1485896400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":93.119,"Week":"\/Date(1488315600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":97.605,"Week":"\/Date(1490994000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":98,"Week":"\/Date(1493586000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}, 
{"ActualPercentage":0,"PlanPercentage":100,"Week":"\/Date(1496264400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}] 

var line = d3.svg.line() 
       // .interpolate("basis") 
       .defined(function(d) { return d.temperature }) 
       .x(function(d) { return x(d.date); }) 
       .y(function(d) { return y(d.temperature); }); 

しかし、私は適切に描かれたパスを取得していない午前:私はこのようなdefinedを使用しています描画不要な値を防ぐために

。ここで写真を参照してください。

enter image description here

が実際に緑のラインがトップに策定する必要があります。赤い線はここで正しいです。私のアプローチに何が間違っていますか?

次に線を描画する正しい方法は何ですか?

更新 私は、この行をコメント場合、グラフは正常に動作します:

// path 
       //  .attr("stroke-dasharray", totalLength + " " + totalLength) 
       //  .attr("stroke-dashoffset", totalLength) 
       //  .transition() 
       //  .duration(2000) 
       //  .ease("linear") 
       //  .attr("stroke-dashoffset", 0); 
+0

へ番目のuが、フィドル – Cyril

+0

シリルでこれを置くことができます。私はjsfiddleで再現することができません – user2024080

+0

@Cyrilここではjsファイルの完全なコードです。 http://plnkr.co/edit/8FaZ1F3kFlcWbJEHjqGh?p=info – user2024080

答えて

2

更新あなたは全体の長さを計算する方法:

var totalLength = [path[0][0].getTotalLength()]; 

あなたは

var totalLength = d3.max(path[0], function(d1){return d1.getTotalLength()}); 
を行う必要があります

このように、最大​​lengあなたは私は私のコードを共有する準備ができていたい場合はstroke-dashoffset

作業コードhere