将鼠标悬停在图例上并悬停在 nvD3 中的路径效果上

Question

我正在使用 nvd3 在我的项目中创建可视化。我必须创建多种不同类型的图表，包括折线图。这是我的 fiddle： https://jsfiddle.net/ykga1jqw/

我的代码：

  // Line chart begins here

  var temperatureIndexJSON = [
    {
      key: "Average temp.",
      values: [{ "x": 1998, "y": 0.45 }, { "x": 1999, "y": 0.48 }, { "x": 2000, "y": 0.5 }, { "x": 2001, "y": 0.52 }, { "x": 2002, "y": 0.55 }, { "x": 2003, "y": 0.58 }, { "x": 2004, "y": 0.6 }, { "x": 2005, "y": 0.61 }, { "x": 2006, "y": 0.61 }, { "x": 2007, "y": 0.61 }, { "x": 2008, "y": 0.62 }, { "x": 2009, "y": 0.62 }, { "x": 2010, "y": 0.62 }, { "x": 2011, "y": 0.63 }, { "x": 2012, "y": 0.67 }, { "x": 2013, "y": 0.71 }, { "x": 2014, "y": 0.77 }, { "x": 2015, "y": 0.83 }, { "x": 2016, "y": 0.89 }, { "x": 2017, "y": 0.95 }]
    }
  ];

    nv.addGraph(function () {
      var chart = nv.models.lineChart() // Initialise the lineChart object.
        .useInteractiveGuideline(true); // Turn on interactive guideline (tooltips)
    chart.xAxis
        .axisLabel('TimeStamp (Year)'); // Set the label of the xAxis (Vertical)
    chart.yAxis
        .axisLabel('Degrees (c)') // Set the label of the xAxis (Horizontal)
        .tickFormat(d3.format('.02f')); // Rounded Numbers Format.
    d3.select('#averageDegreesLineChart svg') // Select the ID of the html element we defined earlier.
        .datum(temperatureIndexJSON) // Pass in the JSON
        .attr('class','line-testing')
        .transition().duration(500) // Set transition speed
        .call(chart); // Call & Render the chart
      nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
      return;
    });

我想在用户将鼠标悬停在图例或路径本身上时更改描边宽度。与这两个链接类似的效果：

https://jsfiddle.net/ymavtsbj/11/

http://bl.ocks.org/bobmonteverde/2070123

我尝试检查 nvd3，但由于它的文档定义不明确并且没有此类示例可用，所以到目前为止我还没有找到解决方案。有人可以帮忙吗？

Answer 1

您可以使用 legendMouseover、elementMouseover 事件，如下所示：

chart.legend.dispatch.on('legendMouseover', function(e) {
  d3.select('path.nv-line').attr('stroke-width', 4);
});

chart.lines.dispatch.on('elementMouseover', function(e) {
  d3.select('path.nv-line').attr('stroke-width', 4);
});

工作example

将鼠标悬停在图例上并悬停在 nvD3 中的路径效果上

Hover on legend and hover on path effect in nvD3

javascript

css

d3.js

charts

nvd3.js