在rChart NVD3（nPlot）中向折线图添加垂直线

我想在使用nPlot创建的折线图中添加几条垂直线，指示特定事件。有什么建议吗

library(reshape2)
library(ggplot2)
library(rCharts)

ecm <- reshape2::melt(economics[,c('date', 'uempmed', 'psavert')], id = 'date')

p7 <- nPlot(value ~ date, group = 'variable', data = ecm, type = 'lineWithFocusChart')

library（重塑2）
图书馆（GG2）
图书馆（艺术）
ecm正常，因此这应该可以回答问题。我想你会注意到，这通常被认为远远超出了普通R用户的技能水平。最终，编写一个自定义图表来很好地处理这种行为，并使普通R用户能够轻松地使用它。我想概括R中要处理的虚线和垂直线。这里是和

library（重塑2）
图书馆（GG2）
图书馆（艺术）
ecm您需要提供一些示例数据。您是否尝试过
行（v=as.Date（“1967-11-30”））
在您的
nPlot
之后？数据可以从以下位置获得：
ecm不确定
行（v=as.Date（“1967-11-30”）
工作。使用setTimeout，我认为现在可以很好地同步这一行非常好！出于某种原因，它在闪亮的环境中不起作用。没有错误，只是没有显示垂直线。我现在记起来了。这是因为afterScript没有与shiny一起发送。要解决这个问题，您可以像我在要点中所做的那样，将afterScript移动到模板内部。如果这仍然不能解决您的问题，请告诉我。你也可以这样做。实际上，我用这段代码编辑了答案，因为避免使用afterScript确实没有负面影响。@timelyportfolio如何更改JS以使其在没有焦点的简单折线图上工作？我已尝试将CSS路径从“.nvd3.nv focus.nv linesWrap”更改为“.nvd3.nv linesWrap”。
library(reshape2)
library(ggplot2)
library(rCharts)

ecm <- reshape2::melt(economics[,c('date', 'uempmed', 'psavert')], id = 'date')
p7 <- nPlot(value ~ date, group = 'variable', data = ecm, type = 'lineWithFocusChart')

#let's add this to make date handling easier
p7$xAxis( tickFormat="#!function(d) {return d3.time.format('%b %Y')(new Date( d * 86400000 ));}!#" )


#grab template from
#https://github.com/ramnathv/rCharts/blob/master/inst/libraries/nvd3/layouts/chart.html
#modify to add callback on graph render

p7$setTemplate(script = sprintf("
  <script type='text/javascript'>
    $(document).ready(function(){
      draw{{chartId}}(  );
    });
  function draw{{chartId}}(  ){  
    var opts = {{{ opts }}};
    var data = {{{ data }}};

    if(!(opts.type==='pieChart' || opts.type==='sparklinePlus' || opts.type==='bulletChart')) {
      var data = d3.nest()
      .key(function(d){
        //return opts.group === undefined ? 'main' : d[opts.group]
        //instead of main would think a better default is opts.x
        return opts.group === undefined ? opts.y : d[opts.group];
      })
      .entries(data);
    }

    if (opts.disabled != undefined){
      data.map(function(d, i){
        d.disabled = opts.disabled[i]
      })
    }

    nv.addGraph(function() {
      chart = nv.models[opts.type]()
      .width(opts.width)
      .height(opts.height)

      if (opts.type != 'bulletChart'){
        chart
        .x(function(d) { return d[opts.x] })
        .y(function(d) { return d[opts.y] })
      }


{{{ chart }}}

{{{ xAxis }}}

{{{ x2Axis }}}

{{{ yAxis }}}

d3.select('#' + opts.id)
.append('svg')
.datum(data)
.transition().duration(500)
.call(chart);

chart.dispatch.brush.on('brushstart',function(){ drawVerticalLines( opts ) });
chart.dispatch.brush.on(
  'brushend',
  function(){ window.setTimeout(
    function() {drawVerticalLines( opts )},
    250
  )}
);

nv.utils.windowResize(chart.update);
return chart;
    },%s);
  };

%s
</script>
"
,
#here is where you can type your vertical line/label function
"function() { drawVerticalLines( opts ) }"
,
#add the afterScript here if using with shiny
"
    function drawVerticalLines( opts ){

  if (!(d3.select('#' + opts.id  + ' .nvd3 .nv-focus .nv-linesWrap').select('.vertical-lines')[0][0])) {
   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()

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

}
"
))


p7