d3js - 使用`defined`时路径未绘制完整值

Question

我从后端获取数据如下:(数据的值为0。所以我阻止了这些值来绘制线。）

[{"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}]

以防止我使用defined这样绘制不需要的值：

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

但我没有得到正确绘制的路径。看这里的图片：

实际上绿线必须达到顶峰。这里的红线是正确的。我的做法有什么问题？

然后绘制线条的正确方法是什么？

更新 如果我评论这一行，图表工作正常：

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

Answer 1

更新计算总长度的方式：

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

你应该做

var totalLength = d3.max(path[0], function(d1){return d1.getTotalLength()});

这样您就可以将最大长度设置为stroke-dashoffset

工作代码here