Home > Developer > Web Develop
In general, there is not much text in the chart. However, sometimes you need some text to describe some graphical elements. Then, you can implement an interaction: when the user mouse slides to a graphic element, a prompt box appears with descriptive text. This is a simple, universal interaction that works on almost all charts. By customizing the appearance to the cue box, you can give the user a good experience.
The Prompt box is "text" Plus "border". display text, generally with SVG's <text>, but there are two problems:
Therefore, the <text> elements of SVG are not suitable for making prompt boxes.
There is an easy way to do this: div + CSS. A div is an element of HTML that sets its positioning method to absolute positioning in a style:
. Tooltip{position:absolute;width:120;height:auto;}Then, when the monitor hears the mouse event, uses the mouse coordinates as the prompt box to locate, the Code shape is as follows:
Element.on ("MouseOver", function (d) {Tooltip.style ("left", (D3.event.pageX) + "px"). Style ("Top", (D3.event.pageY) + " px ");})In practice, to make the cue box beautiful, you also need to set more styles for the Div.
Take a pie chart as an example and draw a good pie chart.
First, add a <div> in <body> and set the transparency to 0, which is completely transparent, and the Div class is set to ToolTip.
var tooltip = D3.select ("Body"). Append ("div"). attr ("Class", "ToolTip"). Style ("opacity", 0.0);Then, define a tooltip style and set its positioning method to absolute positioning , this step is the focus. Other properties when it comes to the appearance of the border and how the text is displayed are defined here as a simple.
. 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, customize the listener for mouse events for each graphical element of the pie chart, including: When the mouse is placed on the graph (mouseover), when the mouse moves on the graph (MouseMove), when the mouse moves out (mouseout).
Arcs.on ("MouseOver", function (d) {/* mouse move in, (1) Change the text of the Cue box by Selection.html () (2) by changing the style left and top To set the position of the cue box (3) Set the transparency of the Cue box to 1.0 (completely opaque) */tooltip.html (D.data[0] + "shipments are" + "<br/>" + d.data[1] + "million units"). Style (" Left ", (D3.event.pageX) +" px "). Style (" Top ", (D3.event.pageY +) +" px "). Style (" opacity ", 1.0);}). On ("MouseMove", function (d) {/* * When the mouse moves, change the style left and top to change the position of the cue box */tooltip.style ("Left", (D3.event.pageX) + "px"). Style (" Top ", (D3.event.pageY +) +" px "). On ("Mouseout", function (d) {/* * When the mouse moves out, the transparency is set to 0.0 (fully transparent) */tooltip.style ("opacity", 0.0);})D3.event.pageX and D3.event.pageY are the coordinates of the current mouse relative to the browser page, while the left and top styles are relative to the browser page for <div> elements that are in an absolutely positioned state. When assigning a value, the value of top is D3.event.pageY + 20, so that the cue box appears slightly below the mouse position, which prevents the mouse from moving on the cue box, causing the issue to not trigger the event.
As shown, a prompt box appears when you move the mouse over "Lenovo."
Source code please click on the following link, the message to view the source code:
Http://www.ourd3js.com/demo/G-9.0/tooltip.html
Thank you for reading.
Document Information"D3.js Advanced Series-9.0" Interactive Prompt box
Start 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
