Javascript D3.js线图不接触端点

下面是绘制线条图的代码：

var xLabels = d3.time.scale().domain([new Date(2016, 0, 1), new Date(2016, 5, 31)]).range([0, w]);    
var incidentData = [0, 0, 0, 0, 350, 208];
                //console.log(xLabels);
                var x = d3.scale.linear().domain([0, incidentData.length]).range([0, w]);
                var y = d3.scale.linear().domain([0, d3.max(incidentData)]).range([h, 0]);

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

                var graph = d3.select("#incident").append("svg:svg")
                      .attr("width", w + m[1] + m[3])
                      .attr("height", h + m[0] + m[2])
                    .append("svg:g")
                      .attr("transform", "translate(" + 70 + "," + m[0] + ")");

                var xAxis = d3.svg.axis().scale(xLabels).ticks(d3.time.months).tickFormat(d3.time.format("%B")).tickSize(-h).tickSubdivide(true);
                graph.append("svg:g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + h + ")")
                      .call(xAxis);

                var yAxisLeft = d3.svg.axis().scale(y).orient("left");
                graph.append("svg:g")
                      .attr("class", "y axis")
                      .attr("transform", "translate(-25,0)")
                      .call(yAxisLeft);

                graph.append("svg:path")
                    .attr("d", line(incidentData))
                    .attr('class', 'line');

                graph.selectAll("dot")
                    .data(incidentData)
                    .enter().append("circle")
                    .attr("r", 2.5)
                    .attr("cx", function (d,i) { return x(i); })
                    .attr("cy", function (d) { return y(d); });

                graph
                    .attr("stroke-dasharray", 500 + " " + 500)
                    .attr("stroke-dashoffset", 500)
                  .transition() // Call Transition Method
                    .duration(4000) // Set Duration timing (ms)
                    .ease("linear") // Set Easing option
                    .attr("stroke-dashoffset", 0);

但最后一行没有触及208点。 以下是JSFIDLE： 请找个人解释一下它有什么问题

感谢和问候， 谢谢你的回复。成功了

大家好，下面是解决问题的方法。
解决方案是将图形属性从

graph
    .attr("stroke-dasharray", 500 + " " + 500)
    .attr("stroke-dashoffset", 500)  

到

问候,，

---

Abhilash D K

你可以稍微调整一下笔划：@GerardoFurtado将其作为回答发布谢谢，但我今天太懒了！干杯。现在解释一下：当我看到“500”时，我把它看作一个神奇的数字。我不太尊重神奇的数字，所以我立即对它做了一些调整，我的第一个猜测（550）成功了。当时我在手机上，但现在我在笔记本电脑上，我可以检索到您线路的正确长度：529.6993408203125。因此，您可以使用530而不是550。PS：接受您自己的答案（因此允许）。

graph
  .attr("stroke-dasharray", 550 + " " + 550)
  .attr("stroke-dashoffset", 550)