用d3绘制曲线下不同的垂直线段

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var data = [10, 20, 30, 40, 50];

var line = d3.line()
             .x(function(d, i) { return xScale(i); })
             .y(function(d) { return yScale(d); })
             .curve(d3.curveCardinal);

svg.append("path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line);

svg.selectAll(".vertical-line")
   .data(data)
   .enter()
   .append("line")
   .attr("class", "vertical-line")
   .attr("x1", function(d, i) { return xScale(i); })
   .attr("y1", function(d) { return yScale(d); })
   .attr("x2", function(d, i) { return xScale(i); })
   .attr("y2", height)
   .style("stroke", "red")
   .style("stroke-width", 1);