c3js条形图onclick事件被触发两次

Question

我已经使用 c3js 构建了一个条形图并在其上实现了 onclick 事件。 Onclick 事件在它上面表现得很奇怪。 我使用了 weird 这个词，因为有时它可以正常工作，但有时它会在一次点击时执行两次。 两天后我无法弄清楚如何处理这个问题，但没有运气:(

是c3js的问题吗？？有什么办法或解决方法来解决这个问题或处理这种情况吗？？

下面是使用onclick事件生成c3条形图的示例代码。

var chart = c3.generate({
            bindto: "#" + idActiveDivChart,
            data: {
                json: agg(obj_Json, selectedDimension),
                type: 'bar',
                labels: {
                    //format: function (v, id, i, j) { return "Default Format"; },
                    format: d3.format('$.2s')
                },
                keys: {
                    x: selectedDimension, // it's possible to specify 'x' when category axis
                    value: selectedMeasures
                },
                groups: [
                  [selectedDimension]
                ],
                onclick: function (d) {
                    alert('Hell stuff');
                },

            },
            axis: {
                x: {
                    type: 'category'
                },
                y: {
                    tick: {
                        format: d3.format('$.2s')
                    }
                }
            },
            title: {
                text: 'Trend by: '+selectedDimension
            },                
        });

Answer 1

这是一个已知问题，如果您单击或靠近两个条形的边界，就会发生这种情况。见https://github.com/c3js/c3/issues/1658。

“修复”它的方法是稍微改变决定是否在条形内发生鼠标点击的函数，如下所示，看到偏移值已从 2 更改为 -1。现在单击两个条之间的边界将不会获得任何命中，而不是两个可能更可取（我无法获得偏移值以使其仅触发一个）。这里的缺点是非常、非常窄或短的条形图（任一维度均小于 3 像素）根本不会报告点击次数。

chart.internal.isWithinBar = function (that) {
        var mouse = this.d3.mouse(that), box = that.getBoundingClientRect(),
            seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
            x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
            w = box.width, h = box.height, offset = /*2*/ -1,
            sx = x - offset, ex = x + w + offset, sy = y + h + offset, ey = y - offset;
        return sx < mouse[0] && mouse[0] < ex && ey < mouse[1] && mouse[1] < sy;
    };