Как добавить вертикальную линию фиксированного диапазона к диаграмме 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 } 
] 

я строй оси у штрафа следующим образом, где я вынужден диапазон для быть от 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 охватывает значение y всех всех точек на карте, соответствующих процентам от 0 до 100?

Answer 1

Вы можете сделать это путем добавления отдельной строки, которая имеет соответствующую y координаты:

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

где координаты для x1 и x2 одинаковы и определяет положение вертикальной линии.