使用D3轉換方法和散點圖的數據

所以我是D3的新手，並且通常對JavaScript沒有多大意義。所以我一直在關注目前使用源代碼創建基本散點圖的一些教程。現在我的問題是，如何在添加更多數據集時使用transition（）方法移動圓圈？我希望能夠設置按鈕，當用戶按下它們時，它會使用相應的數據集激活transition（）方法。我在過渡閱讀教程僅表現在一個矩形的過渡和手工做的，沒有數據，而不是與多個項目使用D3轉換方法和散點圖的數據

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

來源

2012-11-04 Travis Shanks

首先，解決過渡問題之前，你需要重構事情有點。每次數據更改時，您都會想要調用一個update(newData)函數，並使該函數執行所有必要的更新。

This tutorial mbostock描述了您需要的「一般更新模式」。

零件II和III然後繼續解釋如何工作轉換到這種模式。

它們很短。一旦你瞭解了他們，你就可以掌握所有你需要的信息。

來源

2012-11-04 03:32:03 meetamit

花了我一段時間來掌握它，但我明白了，謝謝！ –

本教程提供了在d3中思考「數據」的基本方法。絕對幫助我;謝謝！ – superjadex12

我想你只需要指定.transition()功能後.data(newData)功能

在下面的例子Y2是一個JSON文件，其中Y1是以前的一慣

實例節點：

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

來源

2013-05-24 18:25:12 otayeby

使用D3轉換方法和散點圖的數據

回答

相關問題