d3.js Diagramm nicht aktualisiert, mit neuen Daten

Einer Reihe der Rechtecke werden gezeichnet, indem d3.js durch das Holen einer Anordnung von 100 Objekten. Obwohl die console.log(data) zeigt, dass neue Daten empfangen wurden, werden die neuen Daten Punkte scheinen nicht Anhängen beliebiger Rechtecke.

War .enter().append() falsch verwendet?

function init() {
    var width = 800,
        height = 400,
        margin = 50;

    chart = d3.select('#chart')
                .append('svg:svg')
                .attr('width', width)
                .attr('height', height);
}

function do_update() {
    data = fetch_latest_top100();
    console.log(data)

    chart.selectAll('rect')
        .data(data)
        .enter()
        .append('svg:rect')
        .attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; })
        .attr('width', function(d) { return 3 });
}

jsfiddle: http://jsfiddle.net/BU8cA/

  • es wäre besser, wenn Sie eine Geige (jsfiddle.net) oder plunkr plnkr.co/edit/?p=Katalog, die helfen würde, zu sehen, Problem live
  • Ich weiß nicht, ob es eine copy/paste-Problem, aber Ihnen fehlt ein ")" nach y(d....y auf der y attr, und das könnte der Fehler sein
  • Copy-paste-Problem, korrigierte die Tippfehler, danke!
  • versuchen Sie, die svg: bevor Sie die rect-dann, da Sie bereits die Auswahl der svg, etwa so: .append("rect"), wenn es ist nicht, dass ich nichts mehr sehen komisch aus mit diesem code
  • Ich habe das jsfiddle in der post. Die Daten aus der 2. Holen scheint nicht alles zu tun, um das Diagramm.
  • Ich glaube, ich kann mir nicht helfen, hier, sorry, aber ich bin nicht so vertraut mit der d3 entweder. Wenn Sie nicht gesehen haben noch, es könnte helfen: mbostock.github.io/d3/tutorial/bar-2.html

InformationsquelleAutor Nyxynyx | 2013-12-20
  1. 17

    Sich das problem mit dem update-Methode ist, dass es behandelt NUR ein neues element, und nicht ein update der vorhandenen Elemente, um mit Ihren neuen Daten. Nach dem erstellen der neuen Rechtecke mit Eingabe() Auswahl, Sie haben zurück zu gehen, um Ihre komplette Auswahl (neu und ändern Rechtecke), um die Attribute zu ändern.

    Der einfachste Weg, dies zu tun ist, speichern Sie die Auswahl in eine variable an der Stelle, wo Sie es angewendet haben, werden die Daten der Funktion, sondern vor dem Aufruf der enter-Methode, wie folgt aus:

       var rects = chart.selectAll('rect')
        .data(data);

   rects.enter()
        .append('svg:rect')
        .attr('width', function(d) { return 3 }); 
       //since the width is constant, you only need to set it once

   rects.exit().remove(); //if the number of data points might shrink

   rects.attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; });
   //note that this now includes the rectangles created with enter()
   //as well as the old ones you are resizing /repositioning

    Sollten die richtigen Daten, aber Sie haben noch ein layout-problem (auf der Geige, sowieso), dass Sie Ihre y-Werte sind nicht korrekt eingestellt. Der y-Wert ist die position der oberen Kante des Rechtecks, wenn Sie so wollen-bars, die schauen, wie Sie alle sitzen auf der gleichen Linie, die Sie anpassen müssen, um auf der Grundlage der Höhe des Balkens. Mike Bostock tutorial und demo hier: http://bost.ocks.org/mike/bar/3/

    Update für die D3-version 4+

    Elemente, die an die "enter" - Auswahl nicht mehr automatisch Hinzugefügt, um die main (update) Auswahl. Nun müssen Sie explizit erstellen Sie eine "merge" - Auswahl, durch den Aufruf der merge Methode auf die "enter" Auswahl:

    var rects = chart.selectAll('rect')
    .data(data);

rects.exit().remove(); //if the number of data points might shrink

rects.enter()
    .append('svg:rect')
    .attr('width', function(d) { return 3 }) //since the width is constant, you only need to set it once

  .merge(rects) 
          //merge the newly added elements into the main selection
          //of existing elements to update
    .attr('x', function(d) { return x(d.x); })
    .attr('y', function(d) { return y(d.y); })
    .attr('height', function(d) { return d.value; });
    • Ist diese Antwort noch gültig? Wenn ich rufe, rects.Knoten() nach dem Aufruf von rects.Sie enter().append(), noch bekomme ich wieder ein leeres array. Wenn die obige Behauptung, dass "dieser enthält nun die Rechtecke erstellt, mit enter()" wahr wäre, sollte ich nicht erwarten, dass der besiedelten array, sondern als eine leere auf meinen Aufruf .Knoten()?
    • Sind Sie mit D3 v4? Es verändert, wie verschmilzt die Arbeit wesentlich, siehe Mike Bostock überblick über die Beweggründe für die änderungen. Sie müssen nun explizit aufrufen selection.merge() zum kombinieren der Eingabe-und update-Auswahl.
    • Ja - ich bin mit D3 v4. Die Einführung von .merge() und die änderung der enter/update, das nun die Funktion im Gegensatz zu den meisten Beispiele im Internet) war zum Verrücktwerden. Vielen Dank für die Klarstellung.
    • Können Sie bitte schauen, über dieses problem und helfen, wie Sie zu lösen stackoverflow.com/questions/39998877/...
    InformationsquelleAutor AmeliaBR
Schreibe einen Kommentar