Develop Reference

Why is my tooltip not showing up?

I have made a map with D3 and using some data from nasa.gov(https://data.nasa.gov/resource/y77d-th95.geojson)
Here is the codepen
http://codepen.io/redixhumayun/full/VPepqM/
I have tried making a tooltip with the following code.
//setting up the tooltip here
var div = svg.append('div')
.attr('class', 'tooltip')
.style('opacity', 0.7);
var meteorites = meteorite.selectAll('circle')
.data(data.features)
.enter()
.append('circle')
.attr('cx', function(d) {
return projection([d.properties.reclong, d.properties.reclat])[0]
})
.attr('cy', function(d) {
return projection([d.properties.reclong, d.properties.reclat])[1]
})
.attr('fill', function(d) {
return color_scale(d.properties.mass)
})
.attr('stroke', 'black')
.attr("stroke-width", 1)
.attr('r', function(d) {
return weight_scale(d.properties.mass);
})
.attr('fill-opacity', function(d) {
if (weight_scale(d.properties.mass) > 7) {
return 0.5
}
return 1;
})
.on('mouseover', function(d) {
div.transition().duration(200)
.style('opacity', 0.9)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY / 1.5) + 'px')
div.html('<p>Please show up</p>');
}).on('mouseout', function(d){
div.transition().duration(200)
.style('opacity', 0);
})
However, the tooltip does not show up. I even tried changing the z-index of the tooltip to be greater than that of the underlying map so that it wouldn't be hidden by the map, but no luck.
When I inspect the tooltip in the elements inspector, it shows that the style, left and top attributes of the tooltip div are changing, but I can't seem to see it on the screen. Not sure what I'm doing wrong here.

You have three problems here:
First, set the position of the <div> to absolute in the CSS:
position: absolute;
Second, the biggest problem: you cannot append a <div> to an SVG. The good news is that you don't need to (since we just set the tooltip div to an absolute position). So, append the div to the body:
var div = d3.select("body")
.append('div')
.attr('class', 'tooltip')
.style('opacity', 0.7);
Third problem: set the pointer-events to none or move the tooltip a little bit to the right, otherwise it will get in the way of your mouseover event:
.style('left', d3.event.pageX + 10 + 'px')
This is your updated CodePen: http://codepen.io/anon/pen/GrqKBY?editors=0110

http://codepen.io/anon/pen/YNWKpr
var div = svg.append('foreignObject').append('xhtml:div')
.attr('class', 'tooltip')
.style('opacity', 0.7);
You have to wrap non-svg elements in a foreignObject tag, and you have to specify the html namespace when appending html elements.

Styling d3´s tooltip

I implement a tooltip over circles placed through d3 on a leafletmap like this:
var tooltip = d3.select("body")
.append("div")
.attr("id", "mytooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
feature.on("mouseover",function(d) {
d3.select(this)
.transition()
.ease("elastic")
.duration(500)
.attr('r', function (d){
return (d.properties.xy * 5)
.style("stroke", "black")
d3.select("#mytooltip")
.style("visibility", "visible")
.text(d.properties.xy1 + " " + d.properties.xy2)
});
feature.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px")
.style("left",(d3.event.pageX+10)+"px");
});
feature.on("mouseout",function(d) {
d3.select(this)
.transition()
.ease("elastic")
.duration(500)
.attr('r', function (d){
return (d.properties.xy);
})
.style("stroke", "none")
d3.select("#mytooltip")
.style("visibility", "hidden")
});
Where my feature is this:
var feature = g.selectAll("circle")
.data(myData.features)
.enter()
//...
I wonder how I can style the tooltip that shows up? Is there a way to give it a background, write something in bold, italic, different colors etc?

This is what I like to do. First, I set the CSS style for the tooltip, using a div with a class named "tooltip":
div.tooltip {
position: absolute;
etc...
}
Then I set a tooltip var (here, svgId is the ID of the element where you append your SVG, not much different of selecting "body" as you did):
var tooltip = d3.select("#svgId").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
The div has 0 opacity. Then it's just a matter of showing the tooltip on mouseover or mousemove:
selection.on("mousemove", function(d) {
tooltip.html("<strong> Look, I'm bold !</strong> and now I'm not bold<br>
and this is another line!and this is my data: " + d.whatever)
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", 1);
});
You can use HTML tags to style your text inside the tooltip, making it bold, italic etc. And, finally, we make the tooltip disappear on mouseout (as you did):
selection.on("mouseout", function(d) {
tooltip.style("opacity", 0);
});
Since the div with 0 opacity still takes space in the page, a better approach is changing its display property from none to block during the mouseover, and back to none in the mouse out.

You can style the tooltip with CSS. You could do that in a separate .css file, in a <style> tag, or with d3 the same way you give the tooltip visibility. Something like .style("background", "rgba(179, 107, 0, 0.5)")

D3.js - Changing opacity of element on mouseover IF condition=false

I am making an interactive D3.js chart with filters that display points when the user clicks the selected checkbox. Additionally, on a mouseover event a popup will appear next to the selected point with some information.
Because there is a relatively large number of points on the chart, I opted to make the relevant points transparent when the corresponding checkbox is de-selected, rather than removing the points and re-drawing them (which lags a little on slower machines).
The code I currently have for this works. The code for displaying the tooltips also works. However, they do not work well together.
When the data point is de-selected, the user cannot see it, but because it still exists the browser still displays the tooltip for the de-selected points on mouseover. Therefore I have the issue of "phantom" tooltips appearing when the user moves the mouse over a currently-transparent point.
I have tried to enclose the code that makes the tooltips appear in an if statement as shown below, but this does not work. Unsure if my syntax is wrong or if this behavior is not correct.
This is the original code that mostly works. Tooltips appear, the right datapoints turn transparent, but tooltips appear over transparent points.
svg.selectAll("path")
.data(dataSet)
.enter().append("path")
.attr("class", "dot")
//other stuff goes here
//code to make tooltip appear on mouseover
.on("mouseover", function(d) {
if(d.style("opacity", 0)=false){
div.transition()
.duration(200)
.style("opacity", .8);
div .html(d.datetime.substring(0,10) )
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 24) + "px");
}
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
})
//code for tooltip itself
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
});
//code to make de-selected points transparent
d3.selectAll("[name=cat1]").on("change", function() {
var selected = this.value;
display = this.checked ? "inline" : "none";
svg.selectAll(".dot")
.filter(function(d) {return selected == d.rainSnowStatus;})
.attr("display", display);
});
This is what I tried to do (placing an if statement inside the mouseover function so it only activates when the datapoint is not transparent), but it does not work (the tooltips fail to appear altogether).
//tooltip code within an if statement; does not work
.on("mouseover", function(d) {
if(svg.dot.style("opacity", 0)==false){ // << IS THIS RIGHT?
div.transition()
.duration(200)
.style("opacity", .8);
div .html(d.datetime.substring(0,10) )
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 24) + "px");
}
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
})
Any help is appreciated. Thanks!

You can get the current value of the opacity attribute by running d3.select(this).style("opacity"), so to check it in your mouseover handler you would do
.on("mouseover", function(d) {
if(d3.select(this).style("opacity") != 0){
div.transition()
.duration(200)
.style("opacity", .8);
div .html(d.datetime.substring(0,10) )
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 24) + "px");
}
})

D3 enable mouseover AFTER transition

How can I add a d3-tip / mouseover event AFTER a transition on a histogram / bar chart?
I create a bar chart / plot:
canvas.call(tip);
var sampleBars = canvas.selectAll(".sampleBar")
.data(data)
.enter().insert("rect", ".axis")
.attr("class", "sampleBar")
.attr("x", function(d) { return x(d.x) + 1; })
.attr("y", function(d) { return y(d.y); })
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", 0)
.transition()
.duration(2500)
.delay(500)
.attr("height", function(d) { return height - y(d.y); });
I want to add:
sampleBars
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
And this is the tip:
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<span style='color:white'>" + d3.round((d.y * 100))
+ "%" + "</span>" + " infected"; })
So that the mouseover event occurs after the transition is complete. But I get the error:
Uncaught TypeError: undefined is not a function
The error is for the line:
.on('mouseover', tip.show)
I think there is a simple flaw in my logic. I seem to be confused about how these events or attributes interact with each other.
Again: I want to 'activate' the mouseover tip AFTER the transition is complete so that after the transition does its thing the tip will appear if the user puts their mouse over each bar. I have no problem creating the mouseover event and having it work on user mouseover to display the data I want, but I am having no luck with making this work with a transition of those bars.

Instead of adding/removing events, one approach is to simply set/unset the pointer-events attribute so that the events don't fire when you want them suppressed.
var myselection = d3.select('body')
.append('svg').attr({height: 200, width: 200})
.append('circle')
.attr( {cx: 100, cy: 100, r: 0})
.attr('pointer-events', 'none')
.on('mouseover', function() { console.log('mouseover'); })
.on('mouseout', function() { console.log('mouseout'); })
myselection
.transition().duration(4000).attr('r', 100)
.transition().attr('pointer-events', 'auto')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
If you have the console window open you'll notice that mouse over/out logs nothing until the circle stops growing.

Floating line disturbs the mousemove function

My quest for d3.js wisdom continues!
This time, I have added a guide line which is hovering in a vertical direction as a tool close to the pointer. The problem is that the line disturbs the mousemove functions since it adds an extra layer on top of the rest of the graph, which makes the the code run the mouseout event on sudden pointer movements. Is there a solution for this?
I have implemented the function in the following manner:
svg.on("mousemove", function(d) {
svg.select(".guideline").remove();
//svg.select(".valuelabel").remove();
svg.append("line")
.attr("class", "guideline")
.attr("x1", d3.mouse(this)[0]-3)
.attr("x2", d3.mouse(this)[0]-3)
.attr("y1", margin[0])
.attr("y2", height+margin[0])
.attr("opacity", originOpacity)
.attr("stroke", "#333");
});
And as an example of an event it is disturbing:
//Highlight each stack when hovering, and calculate y value for legend
stacks.on("mousemove", function(d) {
svg.select(".label").remove();
//Calculate the closest index when hovering
var perValue = width / data[0].data.length;
var index = Math.ceil((d3.mouse(this)[0]-margin[3]) / perValue - 0.5);
chart.selectAll(".valuelabel").each(function(data) {
if (data.name == d.name) {
d3.select(this).text(Math.round(data.data[index].y) + "%");
}
});
d3.select(this).attr("opacity", "1");
svg.selectAll("." + d3.select(this).attr("class")).attr("opacity", "1");
svg.append("text")
.attr("class", "label")
.attr("width", "100px")
.attr("height", "20px")
.attr("x", d3.mouse(this)[0] + 40)
.attr("y", d3.mouse(this)[1] - 5)
.text(d.group + ": " + d.name);
});
stacks.on("mouseout", function(d) {
groups.selectAll("." + d.name).text(d.name);
svg.select(".label").remove();
svg.selectAll("." + d3.select(this).attr("class")).attr("opacity", originOpacity);
});

Looks like you want pointer-events none on the guide line.