Question

我正在尝试在d3.js制作一个情节，这是一个小黑点的散点图，如果你将鼠标悬停在一个小黑点上，一个新的半透明大红点出现在同一位置，除原始黑点外，当鼠标离开原始黑点的区域时，红点消失。

我有两个问题。首先是红色圆圈在创建它的瞬间消失。我知道它是创建的，因为如果我删除了.on("mouseleave")部分（方法？），那么红色圆圈会成功出现，但当然会保持不变。

第二个问题是，删除了.on("mouseleave")部分后，当出现一个红色圆圈时，被那个较大的红色圆圈遮挡的其他黑点都不会产生自己的红色圆圈。

我尝试使用“mouseover”和“mouseout”代替“mouseenter”和“mouseleave”，结果相同。如果有人有任何建议我会非常感激他们。谢谢！

这是相关代码。很高兴如果要求发布更多内容，但希望将重点放在重要部分。

drawdots = function() {
    sg.selectAll("circle")
        .remove();
    sg.selectAll("circle")
        .data(df)
        .enter()
        .append("circle")
        .attr("cx", function(d) {return xScale(Math.log(d.x)/Math.log(10));})
        .attr("cy", function(d) {return yScale(Math.log(d.y)/Math.log(10));})
        .attr("fill", "black")
        .attr("id", function(d, i) {return "point" + i})
        .attr("r", 5)
        .on("mouseenter", function(d, i) {
            var cx = sg.select("#point" + i)
                        .attr("cx");
            var cy = sg.select("#point" + i)
                        .attr("cy");
            sg.append("circle")
                .attr("cx", cx)
                .attr("cy", cy)
                .attr("r", 20)
                .attr("fill", "red")
                .attr("opacity", 0.5)
                .attr("id", "red_circle" + i);
        })
        .on("mouseleave", function(d, i) {
            sg.select("#red_circle" + i)
                .remove();
        });
};

Answer 1

我会以不同的方式实现这一点 - 而不是只有一个红点，为每个黑点画一个，只在鼠标悬停时显示。这会使代码变得简单，基本上就是这样。

sg.selectAll("circle.black")
    .data(df)
    .enter()
    .append("circle")
    .attr("class", "black")
    .attr("cx", function(d) {return xScale(Math.log(d.x)/Math.log(10));})
    .attr("cy", function(d) {return yScale(Math.log(d.y)/Math.log(10));})
    .attr("fill", "black")
    .attr("id", function(d, i) {return "point" + i})
    .attr("r", 5);

sg.selectAll("circle.red")
    .data(df)
    .enter()
    .append("circle")
    .attr("class", "red")
    .attr("cx", function(d) {return xScale(Math.log(d.x)/Math.log(10));})
    .attr("cy", function(d) {return yScale(Math.log(d.y)/Math.log(10));})
    .attr("fill", "red")
    .attr("id", function(d, i) {return "red_circle" + i})
    .attr("r", 20)
    .attr("opacity", 0)
    .on("mouseenter", function() { d3.select(this).attr("opacity", 0.5); })
    .on("mouseleave", function() { d3.select(this).attr("opacity", 0); });

在d3.js中使用mouseenter和mouseleave创建圆圈并使其消失

1 个答案: