d3基本動畫

Question

試圖沿着教程here，但沒有足夠的代碼給我填補空白。

Here is the fiddle我正在努力完成與d3加載相同的事情，但是，動畫轉換並不是同時發生的，更不用說了，它只是改變屬性，我在SVG中已經很熟悉了使用JQuery選擇器編碼。那麼我哪裏錯了，或者錯過了船？

// example code doesn't work 
var circle = svg.selectAll("circle"); 
circle.style("fill", "steelblue"); 
circle.attr("cy", 90); 
circle.attr("r", 30); 

// this does, but animations don't work 
d3.selectAll('circle').style("fill", "steelblue"); 
d3.selectAll('circle').attr("cy", 90); 
d3.selectAll('circle').attr("r", 30); 

我最終試圖利用d3的補間，但我無法獲得基礎知識。感謝您提前幫助....

Answer 1

在該示例代碼，SVG是先前分配給一個D3選擇對象：

var svg = d3.select("#chart-2").append("svg") 
     .attr("width", w) 
     .attr("height", h); 

因此，可以用它來選擇子元素，如在原來的例子。

例如，你的小提琴可能是rewritten like so：

var svg = d3.select("#svg"); 

//svg is now a d3.selection object. 
svg.on("click", function() { 
    var circle = svg.selectAll("circle"); 
    circle.style("fill", "steelblue"); 
    circle.attr("cy", 90); 
    circle.attr("r", 30); 
}); 

一些需要注意的有關使用D3結合事件：

在匿名函數：

• 事件勢必d3.event
• 的DOM元素 - 不是d3.selection對象 - 綁定到this
• 如果您將參數傳遞給函數離子，它將被綁定到加入元素的數據。

不是真的代碼，但應該說明我的意思：

var someD3Selection = d3.select("#someElement"); 

someD3Selection.on("click", function(boundData) { 
    d3.event.preventDefault(); // <-- here's the event 
    this; // <-- the actual dom element which is selected in someD3Selection 
    d3.select(this); // <-- same as someD3Selection. 
}); 

Answer 2

這是你在找什麼？持續時間是可選的，但當它稍微慢一點時，更容易看到發生了什麼。

$('#svg').on('click', function() { 
    d3.selectAll('circle').style("fill", "grey").transition().duration(5000).style("fill", "steelblue").attr("cy", 90).attr("r", 30); 
});