Линейная диаграмма NVD3 с вертикальной линией

Question

Я пытаюсь создать линейную диаграмму в NVD3 с вертикальной линией. В частности, this kind линейной диаграммы.

Линейная диаграмма имеет две панели панели просмотра и панель масштабирования, я бы хотел, чтобы линия была на обоих.

Что-то вроде этого:

ли это возможно?

Редактировать: Я нашел способ сделать это, просто добавив к данным дополнительный поток, который представляет собой линию. например

streams[3] = {key:'myline', values:[{x:68,y:0},{x:68,y:7}]} 

Есть ли лучший способ?

Answer 1

Да, это возможно,

Вот пример того, как сделать это: https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

Решение здесь добавить Javascript функция рисования вертикальных линий с помощью NVD3 (внимательно прочитайте комментарии):

function drawVerticalLines(opts) { 

    // CAREFUL HERE !!! the css pasth ".nvd3 .nv-focus .nv-linesWrap" depends on the type of chart you are using, lineChart would use only ".nvd3 .nv-linesWrap" ... ! 
    if (!(d3.select('#' + opts.id + ' the css pasth ".nvd3 .nv-focus .nv" depends on the type of chart you are using, lineChart would use only -linesWrap').select('.vertical-lines')[0][0])) { 
    // Adds new g element with .vertical-lines class; use a css debugger to verify 
    d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').append('g') 
     .attr('class', 'vertical-lines') 
    } 

    vertLines = d3.select('#' + opts.id + ' .nvd3 .nv-focus .nv-linesWrap').select('.vertical-lines').selectAll('.vertical-line') 
    .data(
     [{ 
     'date': new Date('1967-11-30'), 
     'label': 'something to highlight 1967' 
     }, { 
     'date': new Date('2001-11-30'), 
     'label': 'something to highlight 2001' 
     }]) 

    var vertG = vertLines.enter() 
    .append('g') 
    .attr('class', 'vertical-line') 

    vertG.append('svg:line') 
    vertG.append('text') 

    vertLines.exit().remove() 

    // CAREFUL 2 : chart.xAxis.scale() scale depends how you are defining your x Axis in nvd3 chart ... if your are using timestamps, (d.date/60/60/24/1000) becomes (d.date) 

    vertLines.selectAll('line') 
    .attr('x1', function(d) { 
     return chart.xAxis.scale()(d.date/60/60/24/1000) 
    }) 
    .attr('x2', function(d) { 
     return chart.xAxis.scale()(d.date/60/60/24/1000) 
    }) 
    .attr('y1', chart.yAxis.scale().range()[0]) 
    .attr('y2', chart.yAxis.scale().range()[1]) 
    .style('stroke', 'red') 

    vertLines.selectAll('text') 
    .text(function(d) { 
     return d.label 
    }) 
    .attr('dy', '1em') 
    //x placement ; change dy above for minor adjustments but mainly 
    // change the d.date/60/60/24/1000 
    //y placement ; change 2 to where you want vertical placement 
    //rotate -90 but feel free to change to what you would like 
    .attr('transform', function(d) { 
     return 'translate(' + 
     chart.xAxis.scale()(d.date/60/60/24/1000) + 
     ',' + 
     chart.yAxis.scale()(2) + 
     ') rotate(-90)' 
    }) 
    //also you can style however you would like 
    //here is an example changing the font size 
    .style('font-size', '80%') 

} 

И этот метод вызывается в nv.addGraph Callback:

var sharedChart = null; // Shared reference on the chart 

nv.addGraph(function() { 
     ..... 

     sharedChart = chart; 

     return chart; 

     , 
     function() { 
     drawVerticalLines(opts, sharedChart); 
     } 
    ); 

С ОПТСАМИ ... (очевидно, что вы на самом деле не нужны):

var opts${widgetID.replace('-', '0')} = { 
     "dom": "chart${widgetID}", 
     "width": 800, 
     "height": 400, 
     "x": "date", 
     "y": "value", 
     "group": "variable", 
     "type": "lineWithFocusChart", 
     "id": "chart${widgetID}" 
    }; 

Надеется, что это помогает, у меня ушли довольно много времени, чтобы найти его и заставить его работать!