NVD3堆積面積圖

Question

堆積面積的

示例圖表http://nvd3.org/ghpages/stackedArea.html

當我點擊一個系列，它擴展到所有圖表區域，除去其它系列。 如何禁用此功能？

Answer 1

沒有任何NVD3圖表選項爲忽略這種行爲，但你可以直接通過騎單擊事件處理程序。但是，堆疊面積圖會變得有點複雜...

NVD3使用d3.dispatch對象來處理自定義事件。用戶點擊和鼠標懸停以及相關操作全部轉換爲這些自定義事件。

如果您想在自定義事件之後發生某個功能，可以調用調度對象的.on(eventName, function)方法。如果函數參數爲null，則取消附加到該名稱的任何先前的事件處理函數。 （如果您希望同一個事件觸發多個函數，則可以使用"eventName.namespace"形式的字符串作爲第一個參數，將「名稱空間」添加到事件名稱中;然後只有在再次調用on時纔會取消該函數使用完全相同的事件名稱字符串。）

因此，要取消您不想要的行爲，您需要檢查源代碼以找出觸發該行爲的自定義事件的名稱，然後調用使用該名稱和空函數調度對象的on方法。

這是它變得複雜的地方。實際上有多個不同的事件會導致數據系列被打開和關閉。如果你點擊該區域，如果你點擊圖例，或者如果你點擊鼠標懸停時出現的一個散點圓，你會得到相同的行爲。所有這些事件都必須被覆蓋。它們甚至不是同一個調度對象的一部分：主圖表對象本身有一個調度對象，用於處理通過單擊圖表佈局控件創建的完整重繪事件，但堆疊區域上的點擊事件由內部繪圖功能繪製繪圖區域，散點上的點擊事件由內部繪圖功能處理，並且圖例上的點擊事件在圖例功能中處理。

而這裏是它得到真的複雜。當整體圖表更新或其佈局更改時，繪圖區域和散點圖的內部圖表繪圖功能會被主圖表功能覆蓋。這意味着所有的事件都會重置爲NVD3默認值。

因此，您不僅必須禁用所有觸發行爲的事件，還必須修改更新功能以再次禁用它們。並且因爲更新功能本身每更新一次都會重置，所以您需要將更新功能的修改作爲用於禁用事件的功能的一部分。

**更新函數只是使用相同的容器選擇重新調用整個圖表繪圖函數。圖表函數的第一行之一創建更新函數。*

下面的代碼的基礎上，對nvd3.org live code page的堆積面積例如：

nv.addGraph(function() { 

    /* Set up chart as normal */ 
    var chart = nv.models.stackedAreaChart() 
       .x(function(d) { return d[0] }) 
       .y(function(d) { return d[1] }) 
       .clipEdge(true) 
       //.useInteractiveGuideline(true) 
     ; 

    chart.xAxis 
     .showMaxMin(false) 
     .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) }); 

    chart.yAxis 
     .tickFormat(d3.format(',.2f')); 

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

    /* create a function to disable events and modify the update function */ 
    function disableAreaClick() { 

    //I'm probably over-killing with the amount of events I'm cancelling out 
    //but it doesn't seem to have any side effects: 
    chart.stacked.dispatch.on("areaClick", null); 
    chart.stacked.dispatch.on("areaClick.toggle", null); 

    chart.stacked.scatter.dispatch.on("elementClick", null); 
    chart.stacked.scatter.dispatch.on("elementClick.area", null); 

    chart.legend.dispatch.on("legendClick", null); 
    chart.legend.dispatch.on("legendDblclick", null); 
    chart.legend.dispatch.on("stateChange", null); 

    if (chart.update) { 
     //if the chart currently has an update function 
     //(created when the chart is called on a container selection) 
     //then modify it to re-call this function after update 

     var originalUpdate = chart.update; 
      //assign the update function to a new name 

     chart.update = function(){ 
      originalUpdate(); 
      disableAreaClick(); 
     } 
    } 
    } 

    //Call your function, disabling events on current chart and future updates: 
    disableAreaClick(); 
    //this must be called *after* calling the chart on a selection 
    //so that it has an update function to modify 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

Answer 2

你現在可以做的最好的就是禁用圖例。 你可以做，使用chart.showLegend(false)，或者像一個選項：

var options = { 
    showLegend: false 
}; 

Answer 3

，如果你不介意不響應任何鼠標事件一個討厭的解決方案：

pointer-events: none; 

使用這在元素上。