Plotly.js - 在條形圖的類別標籤上點擊事件

Question

是否可以使用Plotly.js繪製條形圖的類別標籤（xticks）上的單擊事件？我知道它有可能獲得實際酒吧的點擊事件，但我正在尋找酒吧下類別標籤上的點擊事件。在下面的圖片中，我正在尋找'長頸鹿'上的點擊事件。 感謝您的幫助提前。

Answer 1

目前在類別標籤上沒有點擊事件。

Answer 2

在此評論https://github.com/plotly/plotly.js/issues/65#issuecomment-350672387

我給出一個解決辦法，因爲現在有滿足你的要求沒有原生的方式。

這是Angular的代碼（但它可以很容易地適應香草JS）。

import * as d3 from 'd3'; 
 

 
export class AngularCustomComponent { 
 

 
    // contructor and other methods here.. 
 

 
    plotlyClickEvents() { 
 
     /** 
 
     * Distinguish between single and double click 
 
     * @see http://bl.ocks.org/ropeladder/83915942ac42f17c087a82001418f2ee 
 
     */ 
 
     function clickcancel() { 
 
      let dispatcher = d3.dispatch('click', 'dblclick'); 
 
      function cc(selection) { 
 
       let down, tolerance = 5, last, wait = null, args; 
 

 
       // euclidean distance 
 
       function dist(a, b) { 
 
        return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2)); 
 
       } 
 

 
       selection.on('mousedown', function() { 
 
        down = d3.mouse(document.body); 
 
        last = +new Date(); 
 
        args = arguments; 
 
       }); 
 

 
       selection.on('mouseup', function() { 
 
        if (dist(down, d3.mouse(document.body)) > tolerance) { 
 
         return; 
 
        } 
 
        else { 
 
         if (wait) { 
 
          window.clearTimeout(wait); 
 
          wait = null; 
 
          dispatcher.apply("dblclick", this, args); 
 
         } 
 
         else { 
 
          wait = window.setTimeout((function() { 
 
           return function() { 
 
            dispatcher.apply("click", this, args); 
 
            wait = null; 
 
           }; 
 
          })(), 300); 
 
         } 
 
        } 
 
       }); 
 
      }; 
 

 
      // Copies a variable number of methods from source to target. 
 
      let d3rebind = function(target, source, method) { 
 
       let i = 1, n = arguments.length; 
 
       while (++i < n) target[method] = d3_rebind(target, source, source[method]); 
 
       return target; 
 
      }; 
 

 
      // Method is assumed to be a standard D3 getter-setter: 
 
      // If passed with no arguments, gets the value. 
 
      // If passed with arguments, sets the value and returns the target. 
 
      function d3_rebind(target, source, method) { 
 
       return function() { 
 
        let value = method.apply(source, arguments); 
 
        return value === source ? target : value; 
 
       }; 
 
      } 
 

 
      return d3rebind(cc, dispatcher, 'on'); 
 
     } 
 

 
     return clickcancel(); 
 
    } 
 

 
    onBarChartXAxisClick() { 
 
     let self = this; 
 
     let item = null; 
 

 
     d3.select("#your-parent-element-identifier"). 
 
      select('.cartesianlayer') 
 
       .select('.xaxislayer-above') 
 
        .selectAll('.xtick > *').each(function(e) { 
 
      // @see https://hstefanski.wordpress.com/2015/10/25/responding-to-d3-events-in-typescript/ 
 
      // but `d3.select(d3.event.currentTarget)` does not work in this case. 
 
      // To workaround see https://stackoverflow.com/a/40314241 
 

 
      item = d3.select(this); 
 

 
      // @NOTE: the element of the x-axis is a <text> and does not have the 
 
      // attribute "pointer-events". Without this attribute is not possibile 
 
      // to listen for mouse events, and for that we have to add it. 
 
      item.attr('pointer-events', 'all'); 
 

 
      const cc = self.plotlyClickEvents(); 
 
      item.call(cc); 
 

 
      cc.on('click', (d, index) => { 
 
       // Do something 
 
      }); 
 
     }); 
 
    } 
 

 
}