[D3.js advanced series-2.2] mechanics diagram parameters, d3.js2.2

[D3.js advanced series-2.2] mechanics diagram parameters, d3.js2.2

There are many parameters in the layout of a mechanical diagram. This article describes them one by one.

The mechanical diagram layout in D3 is calculated using the Welle integral method. This is a numerical method used to solve the Newton motion equation and is widely used in molecular dynamics simulation and video games. The code for defining the layout is as follows:

var force = d3.layout.force()

In D3, 17 functions are provided to set their parameters and events, which are the most common in all la S. We will describe them below.

Size ()

This function is used to set the action range of a mechanical graph. The method is force. size ([x, y]). It is used to specify two things:

• The center of gravity is (x/2, y/2)
• The initial positions of all nodes are limited to [0, x] and [0, y] (but not later)

If this parameter is not specified, the default value is [1, 1].

LinkDistance ()

Specify the distance between the connection lines of the node. The default value is 20. If the distance is a constant, the length of each connection line is always fixed. If it is a function, this function acts on each connection line (source, target.

LinkStrength ()

Specify the hardness of the connection line. The value range is [0, 1]. The larger the value, the harder it is. The intuitive feeling is:

• If the value is 1, drag A vertex A, and the vertex connected to it will maintain the distance motion set by linkDistance with.
• If the value is 0, A vertex A is dragged, And the vertex connected to it is not moving, and the connection line is stretched.

Friction ()

Defines the friction coefficient function. The value range is [0, 1]. The default value is 0.9. However, this value is not physical friction. In fact, it is more similar to the loss of speed over time. This loss is for each vertex.

• If the value is 1, there is no loss of speed.
• If the value is 0, the loss of the speed is the maximum.

Charge ()

Set the gravity, whether it is rejection or attraction. The default value is-30.

• If the value is +, they are attracted to each other. The larger the absolute value, the greater the attractiveness.
• If the value is-, they are mutually exclusive. The larger the absolute value, the larger the exclusion force.

ChargeDistance ()

Set the moving distance of gravity. If the distance is exceeded, there is no action of gravity. The default value is infinity.

Gravity ()

Gravity is generated at the center specified by the size function. Each vertex moves toward the center. The default value is 0.1. You can also set it to 0, so that there is no gravity.

Theta ()

If the number of vertices is too large, the calculation time will increase (O (n log n )). Theta exists to limit this calculation. The default value is 0.8. The smaller the value, the tighter the computing limit.

Alpha ()

Set the animation time. After the animation expires, the animation stops. Actually

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

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, November 08, 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.