c3js гистограмма onclick событие срабатывает дважды

Question

Я построил гистограмму с использованием c3js и внедрил onclick событие на нем. Событие Onclick действует на него странно. Я использовал слово weird, потому что иногда он работает нормально, как следует, но иногда он выполняется дважды в один клик. Я не могу понять, как справиться с этой проблемой, так как два дня, но не повезло :(

нет ли c3js проблема ?? Есть ли способ или обходной путь, чтобы исправить это или справиться с такой ситуацией ??

Ниже приведен пример код для создания гистограммы c3 с OnClick события.

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.

Путь к x 'нужно слегка изменить функцию, которая решает, произошел ли mouseclick в баре, как показано ниже, см. значение смещения было изменено с 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; 
    };