CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
BS100
BS100

Reputation: 873

D3 Tooltip + Mouseover

I tried to apply tooptip when mouseover event happens with brushtool in D3. I figured out why it didn't work out and the solution for this is using a customized helper function.

Accordingly, I am studying the meaning of the helper function I got from googling. In the meantime, I came across a code I can't under stand, which is function chaining (i assume)

What does this code mean? and How does it work?

   function tooltip(selection){


    selection.on('mouseover.tooltip', function(pD, pI){
        // Clean up lost tooltips
        d3.select('body').selectAll('div.tooltip').remove();
        // Append tooltip
        tooltipDiv = d3.select('body')
                       .append('div')
                       .attr('class', 'tooltip')
        var absoluteMousePos = d3.mouse(bodyNode);
        tooltipDiv.style({
            left: (absoluteMousePos[0] + 10)+'px',
            top: (absoluteMousePos[1] - 40)+'px',
            'background-color': '#d8d5e4',
            width: '65px',
            height: '30px',
            padding: '5px',
            position: 'absolute',
            'z-index': 1001,
            'box-shadow': '0 1px 2px 0 #656565'
        });

in particular, I can't get the meaning of

selection.on('mouseover.tooltip')

I understand

selection.on('mouseover', function())

which means when 'mouseover' happenes, invoke the function defined.

But what does 'mouseover.tooltip' mean?

Full code is attached as below.

https://codepen.io/jotnajoa/pen/PoPEppN

Thank you in advance.

Upvotes: 1

Views: 324

Answers (1)

Marcelo
Marcelo

Reputation: 4282

From the D3 docs:

Adds or removes a listener to each selected element for the specified event typenames. The typenames is a string event type, such as click, mouseover, or submit; any DOM event type supported by your browser may be used. The type may be optionally followed by a period (.) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as click.foo and click.bar. To specify multiple typenames, separate typenames with
spaces, such as input change or click.foo click.bar.

selection.on('mouseover', function()) replaces the event handler

selection.on('mouseover.name', function()) adds another event handler

But you do not need to add another event to solve your problem. The code seems to work using the event name without the dot(.) in this forked code pen

Upvotes: 2

Related Questions