javascript - 从 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 方法的文档。因此，如果您想更改鼠标悬停时的颜色，可以使用 on 和 this:

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

这个例子几乎是逐字的 the example in the documentation .