c3js Balkendiagramm onclick event wird zweimal ausgelöst

Question

Ich habe ein Balkendiagramm mit c3js erstellt und Onclick-Ereignis darauf implementiert. Onclick-Event verhält sich merkwürdig. Ich habe das Wort komisch verwendet, weil es manchmal gut funktioniert, wie es sollte, aber manchmal wird es zweimal auf einen Klick ausgeführt. Ich bin nicht in der Lage, herauszufinden, wie mit diesem Problem seit zwei Tagen beschäftigen, aber kein Glück :(

Ist es Problem c3js ?? Gibt es eine Möglichkeit oder Abhilfe dieses Problem zu beheben oder diese Art von Situation zu umgehen ??

Unten ist der Beispielcode für c3 Balkendiagramm mit Onclick-Ereignisse zu erzeugen.

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

Es ist ein bekanntes Problem, und passiert, wenn Sie auf oder in der Nähe der Grenze von zwei Balken klicken. https://github.com/c3js/c3/issues/1658 See.

Der Weg zu 'fi x 'ist es, die Funktion zu ändern, die entscheidet, ob ein Mausklick innerhalb eines Balkens aufgetreten ist, siehe unten, siehe Offsetwert wurde von 2 auf -1 geändert. Wenn Sie nun auf die Grenze zwischen zwei Balken klicken, erhalten Sie keine Treffer mehr als zwei, was vielleicht vorzuziehen ist (ich konnte keinen Offset-Wert erhalten, um nur einen auszulösen). Der Nachteil ist, dass sehr, sehr schmale oder kurze Balken (< 3px in jeder Dimension) überhaupt keine Klicks melden.

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