Calling tooltip in context of d3 visualization

Question

So I have a visualization and I'm trying to use d3.tip() - https://github.com/Caged/d3-tip/blob/master/docs/initializing-tooltips.md#d3tip

This is my code-

            this.svg = d3.select(".timechart").append("svg")
            .attr("width", this.width + this.margin.left + this.margin.right)
            .attr("height", this.height + this.margin.top + this.margin.bottom)
            .append("g")
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

svg.selectAll('.point')
                .data(newData)
                .enter()
                .append("svg:circle")
                .attr("cx", function(d,i){ 
                    var date = d["date"].match(/(\d+)/g);
                    date = new Date(date[2], date[0], date[1]);
                    return xScale(date);
                })
                .attr("cy", function(d,i){
                    var quantitySold = yScale(d["quantity-sold"]);
                    return quantitySold;
                })
                .attr("fill", "red")
                .attr("r", 4)
                .on("mouseover", function(d){
                    tooltip.show();
                })
                .on("mouseout", function(d){
                    tooltip.hide();
                });


            var tooltip = d3.tip()
                .attr("class", "tooltip")
                .offset([0,5])
                .html(function(d){
                    console.log(d);
                    return "<strong> 20 </strong>";
                });

            svg.call(tooltip);

The console.log(d) gives me undefined, when it should give me the datum.

Why?

I also realize - I'm not sure what code I should post here to help - just let me know what would be useful.

You must not call it like that. Try this `return console.log(" 20 ")` — Unknown User, Feb 21 '14 at 07:27
You should post the smallest program that is fully functional. Your problem could be anywhere, so we need to see the , , — Keith, Feb 21 '14 at 07:37
You haven't bound any data to the element that you're attaching the tooltip to. — Lars Kotthoff, Feb 21 '14 at 14:01

score 2 · Answer 1 · edited May 23 '17 at 12:20

The tooltip library that you're using (d3.tip) creates a single html tooltip for the entire visualization. The data for a particular element is passed to the tooltip using the tooltip's .show(d,i) method.

This example from the plug-in's creator shows how it is supposed to work. In particular, note that the show and hide methods are given directly as parameters to the .on(event, function) method of the rectangle selection:

svg.selectAll(".bar")
 /* ... */
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)

When the event occurs, d3 will therefore call these methods and pass the data object to them as a parameter.

In contrast, in your code:

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

d3 will pass the data to your anonymous function, but you do not pass it on to the show/hide functions. So the data is undefined when the tooltip's show function tries to set the html content of the tooltip.

If you find that all confusing still, you might appreciate this write-up about passing functions as parameters.

Finally, although it isn't your main problem right now, you should be defining the tooltip before assigning its functions to an event handler. If you tried to do .on('mouseover', tooltip.show) before defining tooltip, you would get an error. You only avoided it by wrapping that function call in another function.

Calling tooltip in context of d3 visualization

1 Answers1