Conflict in transitions - d3.js

Question

I'm coming to you today with another D3.js problem.
I have a simple bar chart.
When the mouse hovers a bar, a string is displayed on it.
This morning, I added a new transition that changes the background colour of the bar.
Now, the problem is the following:
If the .transition changing the background-color is placed under the one that displays the string, only the background colour changes, the string does not appear.
And if the .transition displaying the string is placed under the one that changes the background colour, only the string appears, without a change in the colour.
Here's a JSFiddle: http://jsfiddle.net/QbGRE/1/
d3.selectAll("div.bar")
.on("mouseover", function(d) {
d3.select(this)
.transition().duration(300)
.style("background-color", "#EE3B3B");
})
.on("mouseout", function(d) {
d3.select(this)
.transition().duration(300)
.style("background-color", "DarkRed");
});
d3.selectAll("div.line")
.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();
});
Thank you all for your help, d3-savvy persons

Answer 1

The reason for this is that you're attaching mouse event handlers twice and the later ones overwrite the earlier ones. So first you're attaching the one that adds the text and then later you're attaching the one that changes the color which replaces the first.
The easiest way to fix this is to do everything you want to do on mouse events in one place:
.on("mouseover", function(d) {
d3.select(this)
.append("text").style("pointer-events", "none")
.text(function(d){return d.occurrence + " occurences";});
d3.select(this)
.transition().duration(300)
.style("background-color", "#EE3B3B");
})
.on("mouseout", function(d) {
d3.select(this)
.select("text").remove();
d3.select(this)
.transition().duration(300)
.style("background-color", "DarkRed");
});
Complete example here. Alternatively, you can use different namespaces for the event handlers:
.on("mouseover.text", function(d) {
// etc
});
.on("mouseover.color", function(d) {
// etc
});
Complete example here.