NVD3折线图，带垂直线 [英] NVD3 line chart with vertical line

问题描述

我正在尝试在NVD3中生成带有垂直线的折线图.特别是这种折线图.

I'm trying to generate a linechart in NVD3 with a vertical line. Particularly this kind of line chart.

该线图有两个面板，一个是查看面板，另一个是缩放面板，我希望这条线都在这两个面板上.

The linechart has two panels a viewing panel and a zoom panel, I would want the line to be on both.

类似这样的事情:

这可行吗?

修改: 我发现了一种方法，只需将表示行的额外流附加到数据上即可.例如

I found out a way to do this by just appending to the data an extra stream which represents a line. e.g.

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

有更好的方法吗?

推荐答案

是的，

这是一个如何做的例子: > https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

Here is an example of how to do it : https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

这里的解决方案是使用NVD3添加javascript函数绘制垂直线(请仔细阅读注释):

The solution here is to add a javascript function drawing vertical lines using NVD3 ( read carefully the comments ) :

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回调中调用此方法:

And call this method in nv.addGraph Callback :

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

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

      sharedChart = chart;

      return chart;

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

使用opts ...(显然您并不需要它):

With opts ... (obviously you don't really need it):

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

希望这会有所帮助，我花了很长时间才找到它并使它起作用！

Hope this helps, it took me quite a long time to find it and to make it work !

这篇关于NVD3折线图，带垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！