Вертикальные/горизонтальные линии с данными в d3

Question

Я пытаюсь нарисовать ряд вертикальных линий на диаграмме d3. Источником данных для этого является список позиций x (в данных), который отображается через масштабную функцию x(), чтобы дать правильное положение.

В настоящее время это реализовано как цикл for для каждой записи в переменной labels. Начало и конечная точка y взяты из данных minY и maxY. Текстовая метка прикреплена к концу строки.

labels = [ 
{ 
    'x':50, 
    'label':test' 
} 

var label = svg.append("g") 
     .attr("class","ilabel") 

// Labels   
for (var i = 0; i < labels.length; i++) { 
    labl = labels[i]; 

    label.append('line') 
     .attr('x1', x(labl.x)) 
     .attr('y1', y(maxY)) 
     .attr('x2', x(labl.x) 
     .attr('y2', y(minY)) 
     .attr("class","ilabel-line"); 

    label.append("text") 
     .attr("transform", "translate(" + x(labl.x)+"," + y(maxY)+ ") rotate(-60)") 
      .style("text-anchor", "start") 
      .attr("dx", ".5em")    
      .attr("class","ilabel-label") 

     .text(labl.label); 

} 

Как бы переписать это таким образом, управляемые данные т.е. проходящей метку в качестве .data затем итерация по этому поводу провести ряд параллельных вертикальных линий.

var label = svg.selectAll(".ilabel") 
     .data(labels) 
    .enter().append("g") 
     .attr("class","ilabel") 

бит у меня проблемы при получении моей головы вокруг является x() и y() функции. x() должен, естественно, возвращать позицию x линии (которая является постоянной для данной строки), но как/что должна вернуть функция y, чтобы нарисовать линию между двумя определенными точками (minY & maxY).

line = d3.svg.line() 
    .x(function(d) { return x(d.x); }) 
    .y(function(d) { return y(d.y); }); 

label.append('path') 
    .attr("d", line) 

Я чувствую, что мне не хватает чего-то очевидного.

Answer 1

В итоге я использовал области rect вместо затененных областей, отличных от линий. Однако, вернувшись к этому, я понял, что код почти одинаковый для рисования серии прямоугольников по сравнению с рядом прямых линий. Путаница возникла из функции d3 .line(), которая используется для генерации path. Однако вы можете создать серию прямых линий с помощью svg:line и передачи данных с помощью функции генератора (здесь завернутые в словаре):

var line = { 
    'x1':(function(d) { return x(labl.x); }), 
    'y1':(function(d) { return y(maxY); }), 
    'x2':(function(d) { return x(labl.x); }), 
    'y2':(function(d) { return y(minY) }), 
    } 


var label = svg.selectAll(".labels") 
     .data(labels) 
     .enter(); 

    label.append("svg:line") 
      .attr("x1", line.x1) 
      .attr("y1", line.y1) 
      .attr("x2", line.x2) 
      .attr("y2", line.y2) 
     .attr("class","label-line"); 

Answer 2

Вы можете просто использовать функции оси в d3. Взгляните на этот пример на Bl.ocks, вы можете легко установить тики, используя tickValues, а затем длину тиков, используя innerTickSize и outerTicksize. Вам также необходимо установить ориентацию.