Plotly.js - 棒グラフのカテゴリラベルのイベントをクリック

Question

Plotly.jsを使って棒グラフのカテゴリラベル（xticks）をクリックするとイベントを取得できますか？私は実際のバーでクリックイベントを得ることが可能ですが、私はバーの下のカテゴリラベルでクリックイベントを探しています。下の画像では、「キリン」のクリックイベントを探しています。 事前に助けてくれてありがとう。

Answer 1

現在、カテゴリラベルにはクリックイベントはありません。このコメントには

Answer 2

https://github.com/plotly/plotly.js/issues/65#issuecomment-350672387

今のあなたの要求を満たすためにネイティブな方法がありませんので、私は、回避策を与えます。

これは角度のコードです（ただし、バニラ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 
 
      }); 
 
     }); 
 
    } 
 

 
}