NVD3 Liniendiagramm mit vertikaler Linie

Question

Ich versuche, ein Liniendiagramm in NVD3 mit einer vertikalen Linie zu generieren. Insbesondere this kind Liniendiagramm.

Das Liniendiagramm hat zwei Panels ein Sichtfeld und ein Zoom-Panel, ich möchte die Linie auf beiden sein.

Etwas wie folgt aus:

Ist dies möglich?

Bearbeiten: Ich fand einen Weg, dies zu tun, indem Sie einfach an die Daten einen zusätzlichen Stream anhängen, die eine Linie darstellt. z.B.

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

Gibt es einen besseren Weg?

Answer 1

Ja, es ist möglich,

Hier ist ein Beispiel dafür, wie es zu tun: https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

Die Lösung hier ist eine Javascript-Funktion zeichnen vertikale Linien hinzufügen NVD3 mit (lesen Sie die Kommentare):

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%') 

} 

Und rufen Sie diese Methode in nv.addGraph Rückruf:

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

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

     sharedChart = chart; 

     return chart; 

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

Mit entscheidet sich ... (natürlich müssen Sie nicht wirklich):

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

hoffe, das hilft, es hat mich eine recht lange Zeit, um es zu finden und es funktioniert!