Parameters of "D3.js Advanced Series-2.2" Mechanics diagram

There are many parameters in the layout of the mechanics diagram, and this article will describe them individually.

The Mechanics diagram layout in D3 is calculated using the Verlay integral method, which is a numerical method for solving Newton's motion equations and is widely used in molecular dynamics simulations and video games. The code that defines the layout is as follows:

var force = D3.layout.force ()

, the D3 provides 17 functions for setting its parameters and events, which are the largest in all layouts and are described below.

Size ()

Used to set the scope of the mechanical diagram, using the method Force.size ([x, Y]), which is used to specify two things:

• Gravity Center Position (X/2, Y/2)
• The initial position of all nodes is limited to [0, X] and [0, y] (but not later)

If not specified, the default is [1, 1].

Linkdistance ()

Specifies the distance of the junction connector, which defaults to 20. If the distance is a constant, then the length of the wiring is always fixed, and if it is a function, then the function is applied to each connecting wire (source, target).

Linkstrength ()

Specifies the hardness of the connector, the value of which is [0, 1], and the larger the value, the harder it is. Its intuitive feel is:

• A value of 1 drags a vertex a, and the vertex connected to it is linkdistance with a distance of the set.
• A value of 0 drags a vertex a, the vertex connected to it does not move, and the connection line is stretched

Friction ()

A function that defines the coefficient of friction, the range of values is [0, 1], and the default is 0.9. But this value is not actually a physical friction, in fact its meaning closer to the speed of the loss of time, the loss is for each vertex.

• With a value of 1, there is no loss of speed.
• A value of 0 is the maximum loss of speed.

Charge ()

Sets the gravity, which is repulsion or attraction, the default value is-30.

• The value is +, then the attraction, the greater the absolute value the greater the attraction.
• The value is-, the repulsion is mutually exclusive, the greater the absolute value, the greater the repulsion force.

Chargedistance ()

By setting the action distance of the gravitational force, exceeding this distance, there is no gravitational force. The default value is infinity.

Gravity ()

The center of the size function creates gravity, and each vertex moves toward the center, with a default value of 0.1. It can also be set to 0, without the effect of gravity.

Theta ()

If the number of vertices is too large, the calculation time will be increased (O (n log n)). The theta is meant to limit this calculation, and the default value is 0.8. The smaller the value, the tighter the calculation will be.

Alpha ()

Set the time for the animation to move, and the motion will stop after the time is over. In fact

• Force.start () is Alpha (0.1)
• Force.stop () is Alpha (0)

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
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

Parameters of "D3.js Advanced Series-2.2" Mechanics diagram