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。

从D3库访问svg

1 个答案: