從D3庫訪問svg

Question

所以我有一個從D3庫的數據生成的SVG圖像（3個圓圈）。

var myData = [1,2,3]; 
var svgViewport = d3.select("body").append("svg").attr("width","600").attr("height","600"); 
var circleSelection = svgViewport.selectAll("circle").data(myData); 
var circleElements = circleSelection.enter().append("circle"); 

circleElements.attr("cx",function(d,i) { 
    return d * 100; 
}) 
    .attr("cy",function(d,i) { 
     return d * 50; 
    }) 
    .attr("r","35"); 

function greenBlue(d,i) { 
    if (i % 2 === 0) { 
     return "green"; 
    } 
    else { 
     return "blue"; 
    }; 
} 

greenBlue(1,2); 
var circleStyle = circleElements.style("fill",greenBlue); 

我想當我把鼠標放在元素上時，它會改變顏色。我知道如何做到這一點，當元素是在HTML文件中，但我想知道它如何

document.getElementById("info").onmouseover = function() { 
mouseOver()}; 

可以在這種情況下被替換。

Answer 1

當然，從閱讀d3 documentation on event handling開始，它會爲您帶來.on方法的文檔。所以，如果你想改變鼠標懸停的顏色，你會使用，並this：

circleElements.on("mouseover", function() { 
    d3.select(this).style("fill", "green"); 
}); 

這個例子幾乎是逐字the example in the documentation。