c3js棒グラフonclickイベントが2回トリガされる

Question

私はc3jsを使用して棒グラフを作成し、onclickイベントを実装しました。 Onclickイベントが異常に機能しています。 という奇妙なという単語を使用しました。時にはうまくいきますが、時にはクリックで2回実行されることもあります。 私はこの問題に対処する方法を2日から把握することができませんが、運はありません:(

それは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を参照してください。

'fiへの道x 'は、以下のようにバー内でマウスクリックが発生したかどうかを判断する関数をわずかに変更することです。オフセット値が2から-1に変更されていることを確認してください。今度は2つの棒の境界線をクリックすると、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; 
    };