CODEWITHSUNDEEP
d3.jstooltip
Union find
Union find

Reputation: 8150

Multiple mouseover events with d3.tip

I am trying to change the stroke of an svg element that also has d3.tip called upon it.

The relevant part of my code looks as follows:

    map.call(tip);

    map.on("mouseover", function(){ d3.select(this).style({stroke:"#7bd362"}); tip.show; });

    map.on("mouseout",tip.hide);

I am able to make my code do one event: have its stroke changed on mouseover, or show a tooltip. But I cannot make the two events happen simultaneously.

Has anyone had success with d3 tip before and additional mouse events before?

Upvotes: 12

Views: 6074

Answers (4)

stallingOne
stallingOne

Reputation: 4006

If you are looking for a solution with D3 v6 (I'm using 6.4.0)

I had to pass event also

This was what worked for me

.on("mouseover", function(e,d) { tip.show(e,d); })

Link to d3.tip-for-d3.v6: https://github.com/bumbeishvili/d3.tip-for-d3.v6

Upvotes: 1

Chris Conlan
Chris Conlan

Reputation: 2962

My solution:

Do the extra mouseover work in d3.tip().html like so ...

let tip = d3.tip().html(function(d) {
    // some extra 'mouseover' code ...
    // some html generating code ...
    return 'some_html_code'
});

Then do the mouseout work in the main D3 code like so ...

svg.append('g')
    .selectAll("rect")
    .data(function(d) { return d }).enter()
        .append("rect")
        .on('mouseover', tip.show)
        .on('mouseout', function(d, i) {
            tip.hide();
            // some extra 'mouseout' code ...
        });

This works in the latest version of d3.tip, because the tip.show function requires access to this, but the tip.hide function doesn't actually use any of its arguments.

Upvotes: 1

Deepak Sharma
Deepak Sharma

Reputation: 458

for me this thing worked 

rect.filter(function(d) { return d in data; })
        .on("click", function(d){
          var year = d/10000;
          year = Math.floor(year);
          var monthInt = d/100;
          var val = 0,id;
          for(var itr=0; itr<$rootScope.dom_elements.length; ++itr) {
             if(dom_element_to_append_to == $rootScope.dom_elements[itr].primary) {
                val = itr;
                break;
            }
        }
        monthInt = Math.floor(monthInt % 100);
        for (var itr = 0; itr<12; ++itr) {
           id = month[itr] + "" + varID;
           $('#' + id).css("z-index",0);
           $('#' + id).css("stroke","#000");
           $('#' + id).css("stroke-width", "2.5px");
       }
       id = month[monthInt-1] + "" + varID;
       currentPathId = id;
       $('#' + id).css("stroke","orange");
       $('#' + id).css("position","relative");
       $('#' + id).css("z-index",1000);
       $('#' + id).css("stroke-width", "4.5px");
       $rootScope.loadDayHourHeatGraph(year, monthInt , val, isCurrency);
   })
        .attr("fill", function(d) { return color(Math.sqrt(data[d] / Comparison_Type_Max )); })
        .on('mouseover', function(d) {

          tip.show(d);
          var year = d/10000;
          year = Math.floor(year);
          var monthInt = d/100;
          monthInt = Math.floor(monthInt % 100);

          var id = month[monthInt-1] + "" + varID;
          if(id!=currentPathId) {
            $('#' + id).css("stroke","orange");
            $('#' + id).css("position","relative");
            $('#' + id).css("z-index",-1000);
            $('#' + id).css("stroke-width", "4.5px");
        }

    })
        .on('mouseout', function(d) {

          tip.hide(d);
          var year = d/10000;
          year = Math.floor(year);
          var monthInt = d/100;
          monthInt = Math.floor(monthInt % 100);

          var id = month[monthInt-1] + "" + varID;
          if(id != currentPathId) {
            $('#' + id).css("z-index",-1000);
            $('#' + id).css("stroke","#000");
            $('#' + id).css("stroke-width", "2.5px");
        }
    });

Upvotes: -2

Union find
Union find

Reputation: 8150

I ended up needing to pass the data object in to the tip.show() function.

The final code:

map.on("mouseover", function(d){ 
  tip.show(d); 
 })
 .on("mouseout", function(d){
  tip.hide(d);          
});

I haven't tried it, but this may also work:

map.on("mouseover", tip.show).on("mouseout", tip.hide);

Upvotes: 16

Related Questions