Home > Developer > Web Develop
[D3.js advanced series-9.0] interactive prompt box, d3.js9.0
In general, too many texts should not exist in charts. However, sometimes some text is required to describe certain graphic elements. Then, you can implement an interaction: When you move the mouse to a certain graphic element, a prompt box appears, containing the description text. This is a simple, universal notebook that applies to almost all charts. You can customize the appearance of the prompt box to bring a good user experience.
The prompt box is "text" and "border ". Display text. Generally, SVG <text> is used. However, there are two problems:
Therefore, the <text> element of SVG is not suitable for creating prompt boxes.
There is a simple method: div + css. Div is an HTML element and its positioning method is setAbsolute Positioning:
.tooltip{position: absolute;width: 120;height: auto;}
Then, when a mouse event is monitored, use the coordinates of the mouse to locate the prompt box. The code is like:
element.on("mouseover",function(d){tooltip.style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY) + "px");})
In practice, you need to set more styles for the div to make the prompt box beautiful.
Take a pie chart as an example to draw a pie chart.
First, add a <div> in <body>. The transparency is set to 0, that is, completely transparent. The class of the div is set to tooltip.
var tooltip = d3.select("body").append("div").attr("class","tooltip").style("opacity",0.0);
Define a tooltip style and set its positioning method.Absolute PositioningThis step is important. For other attributes, the border appearance and text display method are described here.
.tooltip{position: absolute;width: 120;height: auto;font-family: simsun;font-size: 14px;text-align: center;border-style: solid; border-width: 1px;background-color: white;border-radius: 5px;}
Finally, the mouse event listener is customized for each graphic element of the pie chart, including: When the mouse is placed on the graph (mouseover), when the mouse moves on the graph (mousemove ), mouseout ).
Arcs. on ("mouseover", function (d) {/* When the mouse is moved in, (1) Use selection.html () to change the text of the prompt box (2) set the position of the prompt box by changing the style left and top (3) set the transparency of the prompt box to 1.0 (completely opaque) */tooltip.html (d. data [0] + "shipments:" + "<br/>" + d. data [1] + "millions "). style ("left", (d3.event. pageX) + "px "). style ("top", (d3.event. pageY + 20) + "px "). style ("opacity", 1.0 );}). on ("mousemove", function (d) {/* When the mouse moves, change the left and top styles to change the position of the prompt box */tooltip. style ("left", (d3.event. pageX) + "px "). style ("top", (d3.event. pageY + 20) + "px ");}). on ("mouseout", function (d) {/* When the mouse is removed, set the transparency to 0.0 (completely transparent) */tooltip. style ("opacity", 0.0 );})
D3.event. pageX and d3.event. pageY is the coordinates of the current mouse relative to the browser page. For the <div> element in the absolute positioning state, its style left and top are also relative to the browser page. When assigning values, set the top value to d3.event. pageY + 20, so that the prompt box is slightly displayed below the mouse position, this can prevent the mouse moving on the prompt box, resulting in no event triggering problem.
As shown in the result, a prompt box is displayed when you move the mouse over Lenovo.
Click the following link to view the source code by email:
Http://www.ourd3js.com/demo/G-9.0/tooltip.html
Thank you for reading.
Document InformationStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
