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。

修复＆＃39;的方法它是稍微更改决定是否在条形图中发生鼠标点击的功能，如下所示，请参阅偏移值已从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;
    };

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

1 个答案: