[D3.js advanced series-6.0] Drag and drop applications (Drag) and d3.jsdrag

Source: Internet
Author: User

[D3.js advanced series-6.0] Drag and drop applications (Drag) and d3.jsdrag

Drag (Drag) is an important interactive method. This article describes how to use Drag and drop.

1. Definition of drag

D3.behavior. drag () can be used in D3 to define the drag behavior.

var drag = d3.behavior.drag().on("drag", dragmove); function dragmove(d) {d3.select(this)  .attr("cx", d.cx = d3.event.x )  .attr("cy", d.cy = d3.event.y );}

Row 2nd indicates that the dragmove function is called when a drag event occurs. In addition to the drag event, there are also dragstart and dragend events, which have been described in Chapter 2.1 of the advanced section.

In dragmove (), the d3.event. x and d3.event. y variables appear, which are the positions of the current mouse. We will draw the circle next to it, which means to re-draw the circle to the place where the current mouse is located.

2. Draw circles

I believe everyone is familiar with the method of drawing circles. Finally, use the call function in the circle selection set to call the drag behavior just defined. The call function is used as a parameter to pass the set itself to the drag function.

Var circles = [{cx: 150, cy: 200, r: 30}, {cx: 250, cy: 200, r: 30},]; var svg = d3.select ("body "). append ("svg "). attr ("width", width ). attr ("height", height); svg. selectAll ("circle "). data (circles ). enter (). append ("circle "). attr ("cx", function (d) {return d. cx ;}). attr ("cy", function (d) {return d. cy ;}). attr ("r", function (d) {return d. r ;}). attr ("fill", "black "). call (drag); // The drag behavior just defined
3. Results

The result is as follows:

Click the following link to view the source code:

Http://www.ourd3js.com/demo/J-6.0/drag.html

Thank you for reading.

Document Information
  • Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
  • Published on: February 1, December 27, 2014
  • More content: OUR D3.JS-data visualization special site and CSDN personal blog
  • Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.