Question

我正在为项目使用nvd3的简单折线图。用户需要能够以模态形式输入X值并用点注释图形。他们的条目不会更新图表中的行，只会更新点注释。

我试图通过为<rect>元素上方的注释点创建一个组容器来解决这个问题。 nvd3中折线图的<rect>元素似乎是捕获所有事件和委托的图层，但我不想使用它来委托我的注释点。

var annotation_container = d3.select( '.nvd3.nv-wrap.nv-lineChart > g' )
                              .insert( "g", ":first-child" )
                              .attr( "id", "nv-annotate-container" );

var annotation_groups = annotation_container.selectAll( "g" ).data( data );

annotation_groups
  .enter()
  .append( "g" )
  .attr( "id", function( d ){ return d.key; } )
  .append( "g" )
  .attr( "id" , "popup-box" )
  .style( "fill", "#0000ff" )
  .style( "opacity",  "0.8" )
  .attr( "transform", "matrix(0.17443456,0,0,0.2187901,0.55739522,0.48858108)" )
  .append( "path" )
  .attr( "id", "popup-box-path" )
  .attr( "d", "m 99.999,68.332 c 0,5.5 -4.5,10 -10,10 H 10 c -5.5,0 -10,-4.5 -10,-10 V 10 C 0,4.5 4.5,0 10,0 h 79.999 c 5.5,0 10,4.5 10,10 v 58.332 z" );

annotation_groups.on( 'click', function( e ) {
        console.log( "CLICK ", e );
    });

问题是在创建注释组之后，我尝试使用的任何事件（鼠标悬停，鼠标悬停，点击等）都不起作用。

问题：

如何让我的活动发挥作用？
有没有更好的方法来实现我想要做的事情？
之前是否有人尝试过这项工作？

由于

Answer 1

是的，可能，

以下是如何执行此操作的示例： https://gist.github.com/timelyportfolio/80d85f78a5a975fa29d7#file-code-r

这里的解决方案是使用NVD3添加一个绘制垂直线的javascript函数（仔细阅读注释）：

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 Callback中调用此方法：

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

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

Answer 2

Camilles的回答并不适合我，我怀疑我有不同版本的nvd3。然而它确实帮助我弄清楚我需要做什么。我完全删除了顶部的if块，顶部的选择器无效。相反，我用过：

vertLines = d3.select('.nvd3 .nv-linesWrap')
    .select('.nv-groups')
    .selectAll('.nv-groups')
    .data(chartVersions)

NVD3折线图 - 具有独立事件的叠加点

2 个答案: