"D3.js Starter Series---8" Dialog action (event)

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

This section describes how to make a conversation, such as mouse clicks, mouse slides, and so on.

For a selected element, add a dialog operation with the following code:

. On ("click", Function () {})

A function can be a nameless function, or it can be a function of its own definition. The code above listens for mouse-click events, but when the mouse clicks on the selected object, function functions are called.

The common events (event) are:

• click: when clicking on an element
• mouseover : Mouse moves to an element
• mouseout : The mouse moves away from an element
• MouseMove : Mouse is moved
• MouseDown: the mouse button is pressed
• MouseUp: mouse button is loosened
• DblClick : Mouse Double-click

The following example is used in section 5.1 to add a dialog operation to the column chart. Add a portion of the code:

Svg.selectall ("rect").   data (DataSet).   enter ().   Append ("rect").   attr ("x", function (d,i) {return 30 + XScale (i);   } )   . attr ("Y", function (d,i) {return + 500-yscale (d);   })   . attr ("width", function (d,i) {return Xscale.rangeband ();   })   . attr ("height", yscale).   attr ("Fill", "Red")   . On ("click", Function (d,i) {d3.select (this).  attr ("Fill "," green ");   })   . On ("MouseOver", function (d,i) {d3.select (this)  . attr ("Fill", "yellow");   })   . On ("Mouseout", function (d,i) {d3.select (this).  transition ()          . Duration (  "Fill", "red");   });

The above code adds a mouse click (click), mouse Move (mouseover), mouse out (mouseout) three actions.
D3.select (this) is called in the function of the above operation, this is the selection of the current element, this is the current element, because in the event is usually to change the clicked element, etc., so often this code, to remember.    In addition, in order to make the mouse move out of the elements to produce a gradient effect, using the transition and duration, see the 6th section in detail. As follows:

Use the mouse to try it out, the results are visible: http://www.ourd3js.com/demo/event.html, the complete code can be viewed in the right-click Bar in the browser.