लंबवत रेखा

Question

के साथ एनवीडी 3 लाइन चार्ट मैं लंबवत रेखा के साथ एनवीडी 3 में एक लाइनचार्ट उत्पन्न करने की कोशिश कर रहा हूं। लाइन चार्ट के विशेष रूप से 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 के साथ ... (जाहिर है अगर तुम सच में इसकी जरूरत नहीं है)!