At the moment the overlay div is always showing up. But I only want it to show up when the mouse is passing a value in the chart. The method d3.event.pageX and d3.event.pageY will not work. The code is just a snippet of a greater page and somehow the positions of the mouse are not tracked when using the d3 methods.
Here is a fiddle of the code: http://jsfiddle.net/9z6nmwff/
Here is a snippet of the code:
//draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.open); })
// Tooltip stuff after this
.on("mouseover", function(d) {
//console.log("x: " + d.pageX + ", y: " + d3.event.pageY);
$(document).mousemove(function(event){
console.log("x: " + event.pageX + ", y: " + event.pageY);
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" +d.open)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY ) + "px");
//$("span").text("X: " + event.pageX + ", Y: " + event.pageY);
});
});
How can I do this?
Edit:
Here is the code for my current solution. Thank you for your help!
// Tooltip stuff after this
.on("mouseover", function (d) {
$(document).ready(function(){
$(".clearfix").mousemove(function(event){
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" + d.open)
.style("left", (event.pageX+3) + "px")
.style("top", (event.pageY+3) + "px");
});
$(".clearfix").mouseleave(function(){
div.transition()
.duration(200)
.style("opacity", 0);
});
});
});
you can use the mouseleave to do the hiding and let the mouseenter do the showing similar to you are doing now
// Tooltip stuff after this
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "<BR>" + d.open)
.style("left", (event.pageX) + "px")
.style("top", (event.pageY) + "px");
}).on("mouseleave", function (d) {
div.transition()
.duration(200)
.style("opacity", 0);
});
fiddle http://fiddle.jshell.net/leighking2/277yknrs/
Related
I trying to add a simple tooltip to my scatterplot, the thing is that it shows below the graph, I don't know if it is for the "div", but I've tried with svg and g and still won't show.
Is there any other way I can add my tooltip?
const tooltip = d3.select("#CraftBeer")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px")
const mouseover = function(d) {
tooltip
.style("opacity", 1)
}
const mousemove = function(d) {
tooltip
.html(d.beer + "<br/>" + "ABV:" + d.abv + "%" + "<br/>" + "IBU:" + d.ibu +"<br/>" + "SRM:" + d.srm)
.style("left", (d3.event.pageX+10)+"px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
.style("top", (d3.event.pageY-10)+"px")
}
const mouseleave = function(d) {
tooltip
.transition()
.duration(300)
.style("opacity", 0)
}
plot = g.selectAll("bottle")
.data(data)
.enter()
.append("g")
.attr("transform", d => `translate(${xScale(d.abv)},${yScale(d.ibu)})`)
.style("fill", d => colors(d.srm))
.style("stroke", d => colors(d.srm))
.style("stroke-width", "13px")
plot.append("g")
.attr("transform", `scale(0.150) translate(-256,-256)`)
.selectAll()
.data(bottlePath)
.enter()
.append("path")
.attr("d", d => d)
plot.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
Try putting the style for your tooltip before the html like
const mousemove = function(d) {
tooltip
.style("left", (d3.event.pageX+10)+"px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
.style("top", (d3.event.pageY-10)+"px")
.html(d.beer + "<br/>" + "ABV:" + d.abv + "%" + "<br/>" + "IBU:" + d.ibu +"<br/>" + "SRM:" + d.srm)
}
When I hover over the data point it keeps the information for that data point locked in the left portion of the screen. How do I get it to be where the users mouse is? Here's what I have
var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.attr("style", "position: absolute; opacity: 0;")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px");````
...
.on("mouseover", function(d){
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " +
"Top Song: " + d.track)
d3.select(this)
.transition()
.duration(100)
.attr("r", 23)
.attr("fill", "orange");
})
.on("mouseout", function(d) {
d3.select("#tooltip")
.style("opacity", 0)
d3.select(this)
.transition()
.duration(100)
.attr("r", 15)
.attr("fill", "black");
});
You can use d3.event.pageX and d3.event.pageY built into D3. When you're adding your tooltip, try this:
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", .9)
.text("User: " + d.user + " " +
"Top Artist: " + " " + d.artist + " " +
"Top Song: " + d.track)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
You may need to adjust the top style based on the height of your tooltip.
I want to add tooltip to this chart.
I am referring to this and this example
The issue is that their are no unique points on the line in the SVG it just has the path tag.
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
Like the above code selects the dot on the SVG but I dont have any specific element to bind the tooltip.
Can any one help me in this as I am new to d3.js.
you should take d.value for y:
.attr("cy", function(d) { return y(d.value); })
and now append new element on mouseover:
.on("mouseover", function(d) {
svg.append("text")
.text(d.value)
.attr('class', 'tooltip').style("font-size","10px")
.attr("x", x(d.date))
.attr("y", y(d.value))
.attr('fill', 'red');
})
.on("mouseout", function(d) {
d3.selectAll('.tooltip').remove();
});
I have a scatter plot similar to: http://plnkr.co/edit/MkZcXJPS7hrcWh3M0MZ1?p=preview
I want to give a tooltip on mouse hover for every combination. The tooltip code that i have currently does like:
var tooltip = d3.select("body").append("div") // tooltip code
.attr("class", "tooltip")
.style("opacity", 0);
var circles = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.petalWidth); })
.attr("cy", function(d) { return y(d.petalLength); })
.style("fill", function(d) { return color(d.species); })
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1.0);
tooltip.html(d.petalLength+", "+d.petalWidth)
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
This will fail to return the correct tooltip for combinations other than petalWidth and d.petalLength.
Is there any way of knowing which combination has been selected and the associated numerical value for the combination?
To do this:
First store the tool-tip info in a new variable(displayX/displayY) like this:
.attr("cx", function(d) {
d.displayX = d.petalWidth;//so displayX holds the x info
return x(d.petalWidth);
})
.attr("cy", function(d) {
d.displayY = d.petalLength;//so displayY holds the y info
return y(d.petalLength);
})
When you set the combo reset the variables accordingly.
svg.selectAll(".dot").transition().attr("cy", function(d) {
d.displayY = d[yAxy];//reset the variable displayY
return y(d[yAxy]);
});
Same for
svg.selectAll(".dot").transition().attr("cx", function(d) {
d.displayX = d[xAxy];//reset the variable displayX
return x(d[xAxy]);
});
Now in the tool tip mouse hover use variable(displayX/displayY)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1.0);
tooltip.html(d.displayY + ", " + d.displayX)//use displayX and displayY
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
working code here
Hope this helps!
I have 7 declared divs with different class attributes using jquery. I would like to use the 7 divs in mouseover. How would I do this?
My 7 divs are divOne, divTwo ... until divSeven.
I have this sample mouseover code but only one div is used.
nodeEnter.append("circle")
.attr("r", 30)
.style("stroke","white")
.on("mouseover", function(d) {
divOne.transition()
.duration(200)
.style("opacity", .9);
divOne.html(
"Name" + "<br />" + "Address"
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
divOne.transition()
.duration(500)
.style("opacity", 0);
});
How to add the other divs during mouseover? Any help. Thanks
You need to have something like this.
nodeEnter.append("circle")
.attr("r", 30)
.style("stroke", "white")
.on("mouseover", function(d) {
onMouseOver();
})
.on("mouseout", function(d) {
onMouseOut();
});
var divElements = $('.classofdiv1', '.classofdiv2'......); //add all the div's class
function onMouseOver() {
$(divElements).each(function(index) {
$(this).transition()
.duration(200)
.style("opacity", .9);
$(this).html(
"Name" + "<br />" + "Address"
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
}
function onMouseOut() {
$(divElements).each(function(index) {
$(this).transition()
.duration(500)
.style("opacity", 0);
});
}
Hope this helps :)