D3.js线形图不触及端点

D3.js line graph not touching the endpoint

本文关键字:端点 js D3      更新时间:2023-09-26

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

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

谢谢

Gerardo Furtado感谢您的回复。它工作。

嗨,大家跟着这个小提琴,这解决了这个问题。
解决方案是从

开始增加图形属性
graph
    .attr("stroke-dasharray", 500 + " " + 500)
    .attr("stroke-dashoffset", 500)  

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

问候,