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

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