Utilizzo del metodo di transizione D3 con dati per il grafico a dispersione

Question

Quindi sono nuovo di D3 e ho un po 'di exp con JavaScript in generale. Quindi ho seguito alcuni tutorial attualmente utilizzando un codice sorgente che crea una trama di dispersione di base. Ora la mia domanda è: come posso usare il metodo transition() per spostare i cerchi quando aggiungo più dataset? Voglio essere in grado di impostare i pulsanti e quando un utente li preme, attiva il metodo transition() con il set di dati corrispondente. Il tutorial che ho letto sulle transizioni mostrava solo una transizione su un singolo rettangolo e lo ha fatto manualmente, senza dati, e non con più elementi

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

Answer 1

In primo luogo, prima di affrontare il problema di transizione, è necessario refactoring le cose un po '. Dovrai chiamare una funzione update(newData) ogni volta che i tuoi dati cambiano e fare in modo che questa funzione esegua tutti gli aggiornamenti necessari.

This tutorial di mbostock descrive esattamente il "modello di aggiornamento generale" di cui avrete bisogno.

Parti II e III quindi passare a spiegare come lavorare le transizioni in questo modello.

Sono molto brevi. E una volta che li hai capiti, avrai praticamente tutte le informazioni necessarie per farlo.

Answer 2

immagino basta specificare .transition() funzione dopo .data(newData) funzione

Nell'esempio seguente Y2 è un nodo in un file JSON, dove Y1 era il precedente utilizzato

Esempio:

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