javascript - D3.js 线图不接触端点

Question

下面是绘制折线图的代码:

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。这是jsfiddle:https://jsfiddle.net/AbhilashDK/ksto1reb/7/请有人能解释一下它出了什么问题。

感谢和问候，阿比拉什·D·K

Answer 1

Gerardo Furtado谢谢回复。它起作用了。

大家好，关注this fiddle这解决了问题。
解决方案是增加图形属性

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

到

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

问候，阿比拉什·D·K