1

Small problem on one viz. I have a bar chart, and I want it to display some text in the line on 'mouseenter'. That works fine, but I want to remove this text on 'mouseout', and I can't seem to get the hang of it.

Thank you very much for your help! Attached: the concerned section of the d3.js script

    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();
        });
basbabybel
  • 780
  • 8
  • 17

2 Answers2

2

In your code, you're trying to select .text on mouseout. You're selecting nodes with which have the class: "text" rather than text nodes. Remove the dot.

I'd probably also change the mouseout "select" to "selectall" just in case you miss a mouseout event and accidentally add two text nodes.

Edit:

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();
    });

Cleaned up your code.

  1. "mouseover/mouseout" instead of "mouseenter/mouseout"
  2. .select("text") instead of ".text".
  3. style("pointer-events", "none) on the text to stop it causing extra mouse events when it's added.
  4. Added fake data.
Glenn
  • 5,334
  • 4
  • 28
  • 31
  • Thanks for your answer. But nope, it does not solve the problem. The text string adds itself to the previous one that did not disappear... – basbabybel Feb 27 '14 at 21:07
  • That works perfectly. And I find the solution very elegant. Many thanks, Glenn. – basbabybel Feb 27 '14 at 22:10
0

The easiest way to do this is to assign a unique ID to the new text element and select by that:

.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();
    });
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • This seems to work. Although I have sort of a weird blinking, and the text does not display at some point, for some reason. Both with Chrome and Firefox. Do you know what can cause this weird behaviour? – basbabybel Feb 27 '14 at 21:06
  • Hard to say without a complete example. Could be that you're overlaying the text to the `div` and the mouse briefly gets over the text. This way, the `div` would get a mouseout event. Also, HTML doesn't have `text` elements -- did you mean to add that to an SVG? – Lars Kotthoff Feb 27 '14 at 21:15
  • http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5. That was one of the things I missed in the jsfiddle example, but it worked anyway. – Glenn Feb 27 '14 at 22:10