mouseover doesn't work on d3 rectangle
Question
I am new at d3. I have written the below code for 3 rectangles to appear and make them have some mouse interaction.
svg.append("g").selectAll("rect")
.data([1,2,3])
.enter()
.append("rect")
.attr("x",function(d,i){return 600+i*50;})
.attr("y",30)
.attr("width",40)
.attr("height",40)
.attr("fill","blue")
.on("mouseover",function(d) {
d3.select(this).append("text")
.attr("y", "100")
.attr("x", "500")
.attr("class", "hover")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.style("fill", "black")
.text(function(d){console.log("mouseover");
return "Text I want";})
})
.on("mouseout", function(d) {
d3.select(this).select("text.hover").remove();
})
.on("click",function(d){console.log(d);
if(d==1)
Pie(array1,array2);
if(d==2)
Pie(array3,array4);
if(d==3)
Pie(array5,array6);
})
.style("opacity",1e-6)
.transition()
.duration(1000)
.style("opacity",0.8);
The console.log("mouseover") appears at the console, but no text is shown at the browser. The click event works with pie charts being constructed. Can anybody spot what is going wrong? Thank you in advance.
2 answers
solution1
1 ACCPTED 2015-11-22 13:48:48
In your mouseover:
d3.select(this).append("text")
would append the text to the rect but rect elements can not have children.
Changing it to:
svg.append("text")
works. Full code example:
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var svg = d3.select('body') .append('svg') .attr('width', 500) .attr('height', 500); svg.append("g").selectAll("rect") .data([1, 2, 3]) .enter() .append("rect") .attr("x", function(d, i) { return 10 + i * 50; }) .attr("y", 30) .attr("width", 40) .attr("height", 40) .attr("fill", "blue") .on("mouseover", function(d) { svg.append("text") .attr("y", "100") .attr("x", "200") .attr("class", "hover") .attr("font-family", "sans-serif") .attr("font-size", "12px") .style("fill", "black") .text(function(d) { console.log("mouseover"); return "Text I want"; }) }) .on("mouseout", function(d) { svg.select("text.hover").remove(); }) .on("click", function(d) { console.log(d); if (d == 1) Pie(array1, array2); if (d == 2) Pie(array3, array4); if (d == 3) Pie(array5, array6); }) .style("opacity", 1e-6) .transition() .duration(1000) .style("opacity", 0.8); </script> </body> </html>
solution2
0 2015-11-22 12:13:53
I think you should use d3-tip module for d3. It provides very nice hover tooltip
http://bl.ocks.org/Caged/6476579
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
and on bars or rectangles use
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.