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