我正在尝试在现有折线图上添加垂直线。我的数据如下所示 - 列 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 值?
您可以通过
附加具有相应y
坐标的单独行来执行此操作:
svg.append("line")
.attr("y1", y(0))
.attr("y2", y(100))
.attr("x1", ...)
.attr("x2", ...)
其中x1
和x2
的坐标相同,并确定垂直线的位置。