Używanie metody przejścia D3 z danymi dla wykresu punktowego

Question

Jestem więc nowym użytkownikiem D3 i mam mały exp z JavaScriptem w ogóle. Więc śledziłem niektóre tutoriale, używam obecnie kodu źródłowego, który tworzy podstawowy wykres punktowy. Teraz moje pytanie brzmi: w jaki sposób użyć metody transition() do przeniesienia kręgów, gdy dodaję więcej zestawów danych? Chcę mieć możliwość ustawiania przycisków, a gdy użytkownik je naciśnie, aktywuje metodę transition() z odpowiednim zestawem danych. Tutorial czytałem na przejściach pokazał tylko przejście na jednym prostokącie i zrobił to ręcznie, bez danych, a nie z wielu elementów

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

Po pierwsze, zanim zajęcie się problemem przejściowym, trzeba byłaby rzeczy trochę. Będziesz chciał wywoływać funkcję update(newData) za każdym razem, gdy zmieniają się dane, a funkcja ta będzie wykonywała wszystkie niezbędne aktualizacje.

This tutorial przez mbostock opisuje dokładnie "ogólny wzór aktualizacji", którego będziesz potrzebować.

Części II i III następnie przejdź do wyjaśnienia, jak pracować przejścia w ten wzór.

Są bardzo krótkie. A kiedy je zrozumiesz, będziesz miał prawie wszystkie informacje potrzebne do zrobienia tego.

Answer 2

Chyba po prostu trzeba określić .transition() funkcja po .data(newData) funkcja

w poniższym przykładzie Y2 jest węzłem w pliku JSON, gdzie Y1 był poprzedni używany

Przykład:

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