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
を使用しています描画不要な値を防ぐために
。ここで写真を参照してください。
が実際に緑のラインがトップに策定する必要があります。赤い線はここで正しいです。私のアプローチに何が間違っていますか?
次に線を描画する正しい方法は何ですか?
更新 私は、この行をコメント場合、グラフは正常に動作します:
// path
// .attr("stroke-dasharray", totalLength + " " + totalLength)
// .attr("stroke-dashoffset", totalLength)
// .transition()
// .duration(2000)
// .ease("linear")
// .attr("stroke-dashoffset", 0);
へ番目のuが、フィドル – Cyril
シリルでこれを置くことができます。私はjsfiddleで再現することができません – user2024080
@Cyrilここではjsファイルの完全なコードです。 http://plnkr.co/edit/8FaZ1F3kFlcWbJEHjqGh?p=info – user2024080