javascript - 如何将固定范围的垂直线添加到 D3.js 图表

Question

我想在现有的折线图上添加一条垂直线。我的数据看起来像这样 - PC 列是计算的百分比 - 垂直线应该在图表上从 0% 延伸到 100%:

var data = [
{"Month":"2014-06" , "PC" : 38 , "items" : 72 }, 
{"Month":"2014-07" , "PC" : 33 , "items" : 68 }, 
{"Month":"2014-08" , "PC" : 28 , "items" : 80 }, 
{"Month":"2014-09" , "PC" : 16 , "items" : 93 }
]

我按如下方式构建 y 轴，其中我强制范围为 0 到 100，因为数据值实际上并未覆盖整个范围:

var y = d3.scale.linear()
.range([height, 0], 0.5);
y.domain([0, 100]);
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d) { return d + "%"; }).ticks(10);

为了创建垂直线，我尝试这样做:

 var linev = d3.svg.line()
    .x(function(d, i) { 
      return x(data[2].Month); })
.y(function(d, i) { return y(i); }); 

 svgx.append("path")
      .datum(data)
    .style("fill", "none")
     .style("stroke", "black")
    .style("stroke-width", "1px")
      .attr("d", linev);
}

这条线形成了，但我无法让它在与轴相同的 0% 到 100% 范围内延伸，因为我没能把这条线弄对:

.y(function(d, i) { return y(i); });

如何让这组y值覆盖图表上0到100百分比对应的所有点的y值？

Answer 1

您可以通过附加一个具有适当的 y 坐标的单独的行来做到这一点:

svg.append("line")
   .attr("y1", y(0))
   .attr("y2", y(100))
   .attr("x1", ...)
   .attr("x2", ...)

其中 x1 和 x2 的坐标相同，并确定垂直线的位置。