NVD3.js 在鼠标悬停事件中突出显示图形点

Question

如何在将鼠标移到另一个图表上时突出显示折线图上的点。

当我将鼠标移到某个图表上以将所选数据发送到另一个图表以突出显示另一个图表中的点时，我需要来自一个图表的信息。

例如图表 1 的鼠标悬停在 x:3 y:5。它触发一个事件以突出显示另一条图表线。然后在图表 2 中突出显示 x:3 y:5 值。

Answer 1

我明白了。您需要在 'elementMousemove' 事件上向原始图表添加事件分派。在这种情况下，您需要在另一张图表上突出显示必要的值。

chart.interactiveLayer.dispatch.on('elementMousemove.name', function(e) {
      chart2.lines.clearHighlights();
      chart2.lines.highlightPoint(0,parseInt(xIndex),true); 
});
chart.interactiveLayer.dispatch.on('elementMouseout.name', function(e) {
            chart2.lines.clearHighlights();
});

chart 中任何 mosemove 事件的代码将清除之前的突出显示并突出显示行 = '0' 和 chart2 中指定 XIndex 处的点。

Answer 2

使用 Angularjs-nvd3-指令涉及相同问题的人

        $scope.$on('tooltipShow.directive', function(angularEvent, event){
          $scope.selectedChartData = [];
          angularEvent.targetScope.$parent.event = event;
          angularEvent.targetScope.$parent.$digest();
          index= xIndex; //see the above answer

          angularEvent.targetScope.chart.lines.clearHighlights();
          angularEvent.targetScope.chart.lines.highlightPoint(0,parseInt(index),true);

          recursivelyCheckPreviousSibling(angularEvent.targetScope, index);
          recursivelyCheckNextSibling(angularEvent.targetScope, index);
        });

function recursivelyCheckPreviousSibling(targetScope, index){
      //exit condition
      if( targetScope.$$prevSibling == null) {
        targetScope.chart.lines.clearHighlights();
        targetScope.chart.lines.highlightPoint(0,parseInt(index),true);
      }
      else{
        targetScope.$$prevSibling.chart.lines.clearHighlights();
        targetScope.$$prevSibling.chart.lines.highlightPoint(0,parseInt(index),true);
        recursivelyCheckPreviousSibling(targetScope.$$prevSibling, index);
      }
    };
    function recursivelyCheckNextSibling(targetScope, index){
      //exit condition
      if( targetScope.$$nextSibling == null) {
        targetScope.chart.lines.clearHighlights();
        targetScope.chart.lines.highlightPoint(0,parseInt(index),true);
      }
      else{
        targetScope.$$nextSibling.chart.lines.clearHighlights();
        targetScope.$$nextSibling.chart.lines.highlightPoint(0,parseInt(index),true);
        recursivelyCheckNextSibling(targetScope.$$nextSibling, index);
      }
    };

NVD3.js 在鼠标悬停事件中突出显示图形点

NVD3.js highlight graph points at mouseover event

javascript

events

dom-events

nvd3.js