d3.js mouseover events clashing

Question

I'm using Christophe Viau's d3.js tooltip helper: https://gist.github.com/milroc/2975255 but also want to trigger other events on mouseover, not just a tooltip, specifically I want to modify the circle itself, so I tried: ``` var circle = svg.append("svg:g").selectAll("circle") .data(force.nodes()) .enter().append("svg:circle") .call(d3.helper.tooltip(function(d,i){return d.name;})) .attr("r", 12) .call(force.drag) .on("mouseover", function(){d3.select(this).style("fill", "blue");}); ``` Either one works by itself, but not together. I tried editing the tooltip helper, but I got errors. I added variations on these to the tooltip helper: ``` var newvar = function(d,i) {d3.select(this).style("fill", "blue");} var newvar = function(selection) {d3.select(this).style("fill", "blue");} ``` Does anyone know what the proper way is to phrase this?

Accepted Answer

I updated my 10 months old code ;) http://bl.ocks.org/biovisualize/2973775

The part you need is the event namespacing, so you can apply multiple events to the same element without clashing:

```
.on('mousemove.tooltip', ...
```

d3.js mouseover events clashing

Solution

Problem