Question

一个小问题。我有一个条形图，我希望它在'mouseenter'的行中显示一些文字。这工作正常，但我想在'mouseout'上删除这个文本，我似乎无法掌握它。

非常感谢你的帮助！附：d3.js脚本的相关部分

    d3.selectAll("div.line")
        .append("div")
        .attr("class","bar")
        .style("width", function(d){return d.occurrence /10 + "px"})
        .on("mouseenter", function(d) {
            d3.select(this)
            .append("text")
            .text(function(d){return d.occurrence + " occurences"});
        })
        .on("mouseout", function(d) {
            d3.select(this)
            .select(".text").remove();
        });

Answer 1

在您的代码中，您尝试在mouseout上选择.text。您正在选择具有类的节点：“text”而不是文本节点。删除点。

我可能还会将mouseout“select”更改为“selectall”，以防您错过mouseout事件并意外添加两个文本节点。

编辑：

http://jsfiddle.net/QbGRE/

d3.select("div.line").selectAll("div.bar")
    .data(data, function(d) { return d.id;      })
    .enter()
    .append("div").attr("class","bar")
    .style("width", function(d){return d.occurrence /10 + "px";})
    .on("mouseover", function(d) {
        d3.select(this)
        .append("text").style("pointer-events", "none")
        .text(function(d){return d.occurrence + " occurences";});
    })
    .on("mouseout", function(d) {
        d3.select(this)
        .select("text").remove();
    });

清理你的代码。

“mouseover / mouseout”而不是“mouseenter / mouseout”
.select（“text”）而不是“.text”。
样式（“指针 - 事件”，“无”）在文本上停止它会在添加时引起额外的鼠标事件。
添加虚假数据。

Answer 2

最简单的方法是为新文本元素分配一个唯一ID，然后选择：

.on("mouseenter", function(d) {
        d3.select(this)
        .append("text")
        .attr("id", "myText")
        .text(function(d){return d.occurrence + " occurences"});
    })
    .on("mouseout", function(d) {
        d3.select("#myText").remove();
    });

删除mouseout事件上的文本

2 个答案: