세로선이있는 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

여기 솔루션은 자바 스크립트 함수가 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 콜백에서이 메서드를 호출 :

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

희망이 도움이 그것을 발견하고 그것이 작동되도록하는 나에게 꽤 오랜 시간이 걸렸습니다 : OPTS로 17,451,515,

(분명히 당신이 정말로 그것을 필요하지 않습니다)!