"D3.js Advanced Series-2.1" Mechanics diagram of event + vertex fixed

Source: Internet
Author: User

This chapter discusses the events that are commonly used in mechanics diagrams, and then makes improvements to the "Advanced-Chapter 2.0" figure diagram, enabling the user to fix the dragged object.

In "Getting Started-chapter 9.2" and "Advanced-Chapter 2.0", the following code is used:

Force.on ("tick", function () {});

The force here is the layout defined in the previous code, and the tick indicates when the motion is in progress every time a frame is updated. This is the most commonly used event in the mechanics diagram to set how each frame of the mechanics diagram is updated. In addition, there are some other common events.

1. Layout of events

In the code, assume that the following layout is defined:

var force = D3.layout.force (). Size ([Width,height]). Linkdistance (+). Charge (-1500);

Mechanics diagram layout of the events of force itself, D3 provides 3, respectively, for Start, End,tick. When writing code, it can be shaped like this:

The mechanics diagram movement begins with Force.on ("Start", function () {Console.log ("starting");}); /mechanics diagram at the end of the motion Force.on ("End", function () {Console.log ("ending");}); /mechanics diagram for each frame Force.on ("tick", function () {Console.log ("in Progress");});

When each event occurs, the corresponding code is executed.

2. Drag-and-drop events

In "Getting Started-chapter 9.2" and "Advanced-Chapter 2.0", the following code appears:

. Call (Force.drag);

This is set to invoke the function Force.drag () when dragging. 3 Types of drag events are available in D3: DragStart, Dragend, drag.

var drag = Force.drag (). On ("DragStart", function (d,i) {Console.log ("Drag state: Start");}). On ("Dragend", function (d,i) {Console.log ("Drag State: End");}). On ("Drag", function (d,i) {Console.log ("Drag state: In progress");});

In the above code, after three kinds of events are defined, the drag function is assigned to the variable drag, and when invoked, it is used as follows:

. Call (drag);

Can.

3. Fixed vertex

After you use the layout to transform the data, the vertex has a property fixed. When this value is true, the vertex is fixed, and false, it is the motion. The default is False. If you want to improve the "advanced-Chapter 2.0" code, allowing users to arbitrarily fix and unlock vertices, you can add code as follows: When the drag starts, the dragged vertex is set to fixed:

var drag = Force.drag (). On ("DragStart", function (d,i) {d.fixed = true;    Drag to set the object to be dragged to a fixed label_text_2.text ("Drag state: Start");})

When the mouse double-clicks the vertex, unlocks the vertex:

Nodes_img.on ("DblClick", function (d,i) {d.fixed = false;})
4. Results

In the upper left corner, add the label text, please have a good understanding of the situation of the events.

Once dragged, the vertices are fixed and double-clicked vertices can be unlocked.

Complete code please click on the link below, right click "View page source code":

Http://www.ourd3js.com/demo/J-2.1/relationforce.html

Thank you for reading.

Document Information

    • Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
    • Published: November 08, 2014
    • More content: our D3. JS-Data Visualization special station and CSDN personal blog
    • NOTE: Reprint please indicate the source, thank you

"D3.js Advanced Series-2.1" Mechanics diagram of event + vertex fixed

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.