À l'aide de D3 méthode de transition avec les données de nuage de points

Donc, je suis nouveau sur D3 et ont peu d'exp avec le JavaScript en général. J'ai donc suivi quelques tutoriels suis actuellement en utilisant un code source qui crée un nuage de points. Maintenant, ma question est comment puis-je utiliser de la transition() déplace les cercles autour de quand je peux ajouter plus de jeux de données? Je veux être en mesure de définir des boutons et lorsqu'un utilisateur appuie sur eux, il active la transition() la méthode correspondant à l'ensemble de données. Le tutoriel que j'ai lu sur les transitions ne montre qu'une transition sur un seul rectangle et il l'a fait manuellement, sans données, et non pas avec de multiples éléments

//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);

OriginalL'auteur Travis Shanks | 2012-11-04

  1. 13

    D'abord, avant d'aborder le problème de transition, vous avez besoin de revoir un peu les choses. Vous allez avoir à appeler un update(newData) fonction à chaque fois vos modifications de données, et ont cette fonction de faire toutes les mises à jour nécessaires.

    Ce tutoriel par mbostock décrit exactement le "schéma de mise à jour" vous aurez besoin.

    Pièces II et III ensuite d'aller expliquer comment travailler les transitions à l'intérieur de ce schéma.

    Ils sont très court. Et une fois que vous comprendre, vous aurez toutes les informations dont vous avez besoin pour ce faire.

    M'a fallu un certain temps pour le comprendre mais je l'ai eu, merci!
    Ce tutoriel fournit le moyen fondamental de penser à propos de "données" en d3. M'a vraiment aidé, merci!

    OriginalL'auteur meetamit

  2. 1

    Je suppose que vous avez juste à spécifier .transition() fonction après .data(newData) fonction

    Dans l'exemple suivant Y2 est un nœud dans un fichier JSON, où Y1 est la précédente utilisé

    Exemple:

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

    OriginalL'auteur otayeby