Mit D3 übergangs-Methode mit Daten für die scatter-plot

So, ich bin neu in D3 und hab wenig exp mit JavaScript im Allgemeinen. So habe ich nach einigen tutorials bin derzeit mit source-code, der erstellt eine einfache Streudiagramm. Nun meine Frage ist wie benutze ich den übergang () - Methode bewegt die Kreise um, wenn ich mehrere Datensätze? Ich möchte in der Lage sein, set up-Tasten, und wenn ein Benutzer drückt, aktiviert man den übergang () - Methode mit dem entsprechenden Datensatz. Das tutorial habe ich gelesen-übergänge zeigte nur ein übergang auf ein einziges Rechteck, und zwar manuell, ohne Daten, und nicht mit mehreren Elementen

//Width and height
var w = 900;
var h = 600;
var padding = 30;


//Static dataset
var dataset = [
    [50, 30], [300, 75], [123, 98], [70, 40], [247, 556],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
    [600, 150]
];          

//Create scale functions
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]);

var rScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([4, 4]);

//Define X axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);


//Create circles
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", function(d) {
        return rScale(d[1]);
    })
    .attr("fill", "blue");

//Create X axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

InformationsquelleAutor Travis Shanks | 2012-11-04

  1. 13

    Ersten, bevor auf die Umstellung Problem, müssen Sie umgestalten, Dinge, die ein bisschen. Sie gehen zu wollen, zu nennen update(newData) - Funktion jedes mal, wenn Sie Ihre Daten ändern, und diese Funktion haben nicht alle erforderlichen updates.

    Dieses tutorial von mbostock beschreibt genau die "Allgemeine update-pattern", die Sie benötigen.

    Teile II und III dann gehen Sie auf, zu erklären, wie die Arbeit übergänge in dieses Muster.

    Sind Sie sehr kurz. Und hat man Sie einmal verstanden haben, müssen Sie nur über alle Informationen, die Sie benötigen, dies zu tun.

    Brauchte eine Weile, um zu begreifen, aber ich habe es, vielen Dank!
    Dieses tutorial bietet die grundlegende Möglichkeit, um sich über "Daten" in d3. Hat mir definitiv dabei geholfen; vielen Dank!

    InformationsquelleAutor

  2. 1

    Ich denke, man muss einfach angeben .transition() Funktion nach .data(newData) Funktion

    Im folgenden Beispiel Y2 ist ein Knoten in einem JSON-Datei, in der Y1 war die vorige verwendet

    Beispiel:

    //Creating the button
var button = d3.select("body")
.append("input")
.attr("type","button")
.attr("value", "A button");

//Transitioning process
button.on("click", function()
{   circles
    .data(data.Y2)
    .transition()
    .attr("cx", function(d)
    {
        return d[0];
    }
    )
    .attr("cy", 300);
}
)

    InformationsquelleAutor

Schreibe einen Kommentar