I'm wondering if its possible to define a CSS style for a tooltip function displayed by d3.js on mouse over event in the actual body of the definition rather than on top of the page in the style section.
JAVASCRIPT:
var tooltip = d3.select("#scatter-load").append("div")
.attr("class", "tooltip")
//.attr("position", "absolute")
//.attr("width", "200px")
//.attr("height", "30px")
//.attr("pointer-events", "none")
.style("opacity", 0);
chocolateGroup.append("circle")
.attr("r", function(d) {return rScale(d.size);})
.attr("opacity", 0.7)
.style("fill", "steelblue")
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9)
tooltip.html(d.manufacturer + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
CSS:
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
What I am looking for is something similar to this style where CSS styling is defined when object is created (for example fill):
svg.append("path")
.datum(data)
.attr("d", area)
.attr("fill", "steelblue");
You should be using style to set CSS style like this:
.attr("class", "tooltip")
.style("position", "absolute")
.style("width", "200px")
.style("height", "30px")
.style("pointer-events", "none")
.style("opacity", 0);
Related
I am trying to use the click event in a line chart in d3. Everytime I click on a line I want the line to change color to red and display the country name. The problem I am having is when click a line it changes color however it reverts back to the original color. The country name appears correctly.
This is the code to generate the line:
let line = d3.select("#linechart")
.append("svg")
.attr("width", widthline + marginline.left + marginline.right)
.attr("height", heightline + marginline.top + marginline.bottom)
.append("g")
.attr("transform", "translate(" + marginline.left + "," + marginline.top + ")")
.attr("id", "diagram");
line.selectAll(".line").data(databyCountry).enter()
.append("path")
.attr("fill", "none")
.attr("stroke-width", .5)
.attr("class", "line")
.attr("d", d => lines(d[1]))
.style("stroke", "steelblue")
.on("mouseover", countryOver)
.on("mouseout", countryOut)
.on("click", click);
this is the event code:
function countryOver(event, d){
d3.select(this)
.style("stroke", "black")
.style("stroke-width", 2);
line.append("text")
.text(d[0])
.attr("class", "title-text")
.attr("x", x(d.date) )
.attr("y", y(d.stringency_index))
.attr("font-size", "15px")
.attr("fill", "black")
.attr("id", "countryName");
};
function countryOut(event, d) {
d3.select(this).style("stroke", "steelblue").style("stroke-width", .5);
d3.select("#countryName").remove();
};
function click(event, d) {
d3.select(this).style("stroke", "red").style("stroke-width", 2);
line.append("text")
.text(d[0])
.attr("class", "title-text")
.attr("x", 500)
.attr("y", 10)
.attr("font-size", "15px")
.attr("fill", "black")
.attr("id", "countryClick");
};
Hope someone could help me! Thanks!
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)
}
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!
Ive added 20 SVG squares to a trend graph I made using D3.js. Ech square is a clickable object which toggles lines on and off the graph. In Firefox the squares appear in the right lace, in Chrome, the CSS apparently stops working completely and the squares just drop to the bottom of the page.
Heres a link to the graph, http://www.andkensol.com/dataviz/TrendGraph/trendMov.html
And here is some of the JavaScript and CSS I used to make and then position the squares. Using position:relative is probably the cause. Would anyone have any advice or suggestions?
//JS
//AVENGERS CONTROLS
d3.select(".chart").append("svg")
.attr("class", "AvengeDot")
.on("mouseover", function(d) {
nameInfo.transition()
.duration(100)
.style("opacity", .9);
nameInfo.html("Marvel's The Avengers")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
nameInfo.transition()
.duration(200)
.style("opacity", 0);
})
//HUNGER GAMES CONTROLS
d3.select(".chart").append("svg")
.attr("class", "HungerDot")
.on("mouseover", function(d) {
nameInfo.transition()
.duration(100)
.style("opacity", .9);
nameInfo.html("Hunger Games")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
nameInfo.transition()
.duration(200)
.style("opacity", 0);
})
//CSS
.AvengeDot{
position:relative;
left:77%;
bottom:118%;
width:15px;
height:15px;
background-color:#FF9604;
cursor:pointer;
}
.HungerDot{
position:relative;
left:75.5%;
bottom:114%;
width:15px;
height:15px;
background-color:#FF9F18;
cursor:pointer;
}