c3js 막 대형 차트 onclick 이벤트가 두 번 트리거 됨

Question

저는 c3js를 사용하여 막 대형 차트를 작성하고 onclick 이벤트를 구현했습니다. Onclick 이벤트가 이상하게 작동합니다. 이상한이라는 단어를 사용하기도했는데 때로는 제대로 작동하기 때문에 가끔씩 클릭이 두 번 실행되기도합니다. 상황 ??

이런 종류의 문제를 해결하거나 처리 할 수있는 방법이나 해결 방법이 있습니까? 나는 이일 때문에이 문제를 해결하는 방법을 알아낼 수없는,하지만 운 :(

는 문제를 c3js가 없습니다 다음은

는

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

그것은 알려진 문제입니다. 온 클릭 이벤트와 C3 막대 차트를 생성하기위한 샘플 코드, 그리고 당신이 또는 두 개의 바의 경계 근처를 클릭하면 발생합니다. https://github.com/c3js/c3/issues/1658를 참조하십시오.

'fi로가는 길 x '아래에서 마우스 커서가 막대 내에서 발생했는지 여부를 결정하는 기능을 약간 변경하려면 오프셋 값이 2에서 -1로 변경된 것을보십시오. 이제 두 개의 막대 사이의 경계를 클릭하면 두 개가 아닌 원하는 히트를 얻을 수 있습니다 (나는 하나의 방아쇠를 만들기 위해 오프셋 값을 얻을 수 없습니다). 단점은 매우 좁거나 짧은 바 (어느 한 치수에서 3x1x3px)가 클릭 수를 전혀보고하지 않는다는 것입니다.

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