Dikey çizgi ile NVD3 çizgi grafiği

Question

NVD3'te dikey bir çizgi ile bir linechart oluşturmaya çalışıyorum. Özellikle çizgi grafikte this kind.

Linechart iki panel bir izleme paneli ve bir yakınlaştırma paneli vardır, ben her iki tarafta da olmasını isterim. Böyle

şey:

bu uygulanabilir nitelikte mi?

Düzenleme: Sadece verilere bir çizgi temsil fazladan akışı ekleyerek bunu yapmanın bir yolunu buldular. Örneğin.

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

Daha iyi bir yolu var mı?

Answer 1

Evet bu İşte

bunu nasıl örneğidir, mümkün: https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

burada çözüm bir javascript fonksiyonu NVD3 kullanarak dikey çizgiler çizerek eklemektir (dikkatlice yorumları okumak):

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

} 

Ve nv.addGraph çağrı gibi bu yöntemi çağırın:

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}" 
    }; 

Umut bu yardımcı olur onu bulmak ve o iş yapmak bana oldukça uzun zaman aldı: seçmesi ile

... (Açıkçası gerçekten ihtiyacınız yoktur)!