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

Question

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

是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。现在点击两个条之间的边界将不会让你点击，而不是两个可能更可取(我无法获得偏移值，因为它只触发一个)。这里的缺点是非常非常窄或短的条形图(在任一维度上 < 3px)根本不会报告点击。

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