从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。