0

我正在尝试在 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();
        });
};
4

1 回答 1

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); });
于 2013-04-12T19:37:51.050 回答