Plotly.js - 条形图类别标签上的点击事件

Question

是否可以使用Plotly.js在条形图的类别标签（xticks）上获得点击事件？我知道有可能在实际的栏上获得点击事件，但我在条形标签下寻找点击事件。在下图中，我正在寻找'长颈鹿'上的点击事件。 感谢您的帮助。

Answer 1

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

中

我提供了一种解决方法，因为目前没有本地方式来满足您的请求。

这是Angular的代码（但它很容易适应vanilla JS）。

＆＃13;

＆＃13;

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

}

＆＃13;

＆＃13;

＆＃13;

Answer 2

目前类别标签上没有点击事件。