D3: Wie kann ich Daten in ein vorhandenes Balkendiagramm

Habe ich erfolgreich meinen ersten Balkendiagramm. Jetzt möchte ich hinzufügen, mehr bars, die bestehenden Diagramm mithilfe der übergänge, um eine schöne user experience.

Hier ist mein code:

var data = [23, 85, 67, 38, 70]; //dummy, normally much more
labellist = ['label1','label2','label3','label4','label5'];

var w = 815,
    h = 500,
    labelpad = 165,
    x = d3.scale.linear().domain([0, 100]).range([0, w]),
    y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2);

mySvg = d3.select("#chart")
  .append("svg");

vis = mySvg.attr("width", w + 40)
    .attr("height", h + 20)
    .append("svg:g")
    .attr("transform", "translate(20,0)");

bars = vis.selectAll("g.bar")
    .data(data)
    .enter().append("svg:g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(" + labelpad + "," + y(i) + ")"; })


bars.append("svg:rect")

    .transition()
    .duration(500)
    .attr("width", x)
    .attr("height", y.rangeBand())
    ;



var rules = vis.selectAll("g.rule")
    .data(x.ticks(10))
  .enter().append("svg:g")
    .attr("class", "rule")
    .attr("transform", function(d) { return "translate(" + x(d) + ", 0)"; });

rules.append("svg:line")
    .attr("y1", h)
    .attr("y2", h + 6)
    .attr("x1", labelpad)
    .attr("x2", labelpad)
    .attr("stroke", "black");
rules.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("x1", labelpad)
    .attr("x2", labelpad)
    .attr("stroke", "white")
    .attr("stroke-opacity", .3);

Wie kann ich programmatisch die Daten ändern, hinzufügen und entfernen von anderen bars und lassen Sie die vorhandene Folie nach oben/unten?

InformationsquelleAutor Hokascha | 2012-08-28
  1. 6

    Weisen Sie in irgendeiner form der Schlüssel, um die Balken " Daten, also d3 identifizieren können diejenigen, die es in der vorherigen Gruppe. Der default ist index-basiert, und das kann sein, was Sie wollen.

    Soweit die übergänge gehen, die Sie möchten, ändern Sie Ihren code so etwas wie dieses:

    bars = vis.selectAll("g.bar")
    .data(data);

bars.enter().append("svg:g")
    .attr("class", "bar")
    .append("svg:rect").

bars.transition().duration(500)
    .attr("transform", function(d, i) { 
         return "translate(" + labelpad + "," + y(i) + ")"; 
     })
    .selectAll("svg:rect")
    .attr("width", x)
    .attr("height", y.rangeBand())
;

bars.exit().transition().duration(500)
    .selectAll("svg:rect")
    .attr("height", 0)
    .remove();

    "Enter ()" - Funktion wird am besten verwendet, um die Struktur zu erstellen sofort. Dann verwenden Sie den ersten Auswahl-Objekt (Balken) für die Anwendung der neuen Daten für alle Elemente.

    Du wahrscheinlich auch wollen, entfernen Sie alle veralteten bars. Hier habe ich verkleinert Sie auf 0 und dann entfernt Sie, aber Sie können basteln Sie um die Wirkung, die Sie wollen.

    • Vielen Dank für deine Antwort, ich bin neu in d3 - kennen Sie ein tutorial oder Beispiel zeigt die Verwendung der Tasten, die Sie erwähnt? Was würde mein updateChart () - Funktion Aussehen? Wenn ich versuche den code für übergänge wird das Diagramm nicht angezeigt wird, bekomme ich ein "nicht abgefangener Fehler: SYNTAX_ERR: DOM Exception 12" in d3.v2.js bei d3_selection(Gruppen) (habe ich bereits behoben-Tippfehler im zweiten call, Punkt statt Semikolon)
    • Ich habe nicht diesen code ausführen, also gibt es wahrscheinlich andere Probleme mit ihm. Ich habe nur versucht, Ihnen zu zeigen, die Idee mit den enter/exit-Funktionen zum hinzufügen/entfernen von Elementen.
    • Dies ist der tutorials Seite: github.com/mbostock/d3/wiki/Tutorials
    • Dies ist ein guter mit bar-charts, die zeigen, wie hübsch Balken einfügen: mbostock.github.com/d3/tutorial/bar-2.html
    InformationsquelleAutor Glenn
Schreibe einen Kommentar