Wie update & Übergang ordinalScale Achse in d3 v4

Question

Ich dachte, ich würde ein wenig über ES6-Klassen lernen, während einige d3 Arbeit, und so machte ich eine Ordnungszahl Balkendiagramm-Klasse (fiddle here). Es zeigt mehrere Datenreihen (z.

[ 
    [{"label":"apple", "value" :25}, 
    {"label":"orange", "value": 16}, 
    {"label":"pear", "value":19}], 

    [{"label":"banana", "value" :12}, 
    {"label":"grape", "value": 6}, 
    {"label":"peach", "value":5}] 
]; 

Ich versuche das Update Teil zum Laufen zu bringen (in dem Sie neue Daten und die Bars/axis Übergang schön liefern) Leider viel von dem Beispielcode ist für v3 , die offenbar nicht mit v4 arbeiten, wie ich bin mit der spezifische Methode ist:..

updateData(data){ 
    //get an array of the ordinal labels out of the data 
    let labels = function(data){ 
     let result = []; 
     for(let i=0; i<data.length; i++){ 
      for (let j=0; j<data[i].length; j++){ 
       result.push(data[i][j].label); 
      } 
     } 
     return result; 
    }(data); 

    //loop through the (potentially multiple) series in the data array 
    for(let i=0; i<data.length; i++){ 
     let series = data[i], 
      bars = this.svg.selectAll(".series" + i) 
     bars 
      .data(series) 
      .enter().append("rect") 
      .attr("class", ("series" + i)) 
      .classed("bar", true) 
      .merge(bars) 
      .attr("x", 0) 
      .attr("height", this.y.bandwidth()) 
      .attr("y", (d) => { return this.y(d.label); }) 
      .transition().duration(500) //grow bars horizontally on load 
      .attr("width", (d) => { return this.x(d.value); }); 
     bars.exit().remove(); 
    } 

    //update domain with new labels 
    this.y.domain(labels); 
    //change the y axis 
    this.svg.select(".yaxis") 
     .transition().duration(500) 
     .call(this.yAxis) 
} 

ich versuche das Update Muster auf Mike Bostock's code zu stützen

ich erhalte eine interne d3 Fehler von .call(this.yAxis), der Übergang nicht anima te, und die Yaxis wird nicht aktualisiert. Darüber hinaus übergehen die Balken auch nicht. Was läuft falsch?

Answer 1

mehr Probleme:

• -Update eines scaleOrdinal/scaleBand Achse VOR Aktualisieren von Daten kommen, da sonst die Balken nicht in der Lage sein, ihr y-Skala (y(d.yourOrdinalLabel) Attribut zu finden. Der Achsencode muss daher vor dem Barcode stehen.
• bars (oder was auch immer Element, das Sie mit den Daten verbinden) sollte als das Ergebnis dieser Join-Operation deklariert werden, so dass es mit .attr() für die visuellen Attribute verkettet werden kann. let bars = svg.selectAll(".yourClass").data(yourData);
• Es ist sinnvoller, in der Klasse eine einfache update-Methode zu verwenden, wenn Sie nur den Ausschluss vorhandener Datenreihen aktivieren und keine neuen Daten hinzufügen. Siehe aktualisierte Geige.

Working jsfiddle.