background

There is a requirement that I need to refer to the implementation of Wordwebs, which is a direction THAT I have little experience with. So after finishing this requirement, I want to go over some strange things again and write this article as a record.

This article is intended to briefly introduce and show some of the effects of d3-Force

Can take an examination of to this scene from the example interaction is more, both can extend the ball, and can drag and drop ball and canvas, canvas is a state of unlimited size, are now known to some of the charts library does not support this scenario, well find a similar functionality, but it is not free of commercial support, so going to himself to achieve, after some efforts, This requirement is finally completed. The final implementation can be experienced in this D3-force-pj.

This mainly uses the ability provided by D3-Force to achieve, I will briefly introduce the effects of several forces provided by D3-Force through a few examples.

Before continuing to read the article, you can open this address d3-force-tutorial and follow it while reading the article to deepen your impression

D3-force

D3 stands for data-driven Documents, which, as the name implies, is a data-driven document. Simply put, it is a JavaScript library that is mainly used for data visualization. This article mainly introduces the D3-force library, which is very helpful for us to achieve the force guidance chart. The following mainly introduces the effects of several forces it provides.

Position

As the name implies, this is a kind of “position force”, which can be understood as a force at this position is attractive to Node. Node has a tendency to move towards the position where the force is, which can be intuitively felt by the following examples:

The force is in the center, and the ball is moving toward the center.

Of course, you can also adjust the position of the force to make the ball move somewhere else.

When setting this force, we can configure the position and strength of the force, which you can experience by yourself in the demo.

In the example above, the balls are moving in the direction of the position force, but there is always a feeling that something is missing. The idea is that the balls are stacked, there is no “size”, and if you want to give the ball “size”, you can do it by the “force” below.

Collide

Collide allows you to set node’s “colliding forces” so that the balls have a “size” property and keep them balanced when the “colliding forces” overlap. Let’s put them on top of position to see what happens.

As you can see, the ball has a tendency to move toward the center and is affected by the force of the collision. The two forces collide and eventually reach a state of relative equilibrium depending on the size of the position and the force colliede. By adjusting the parameters of these two forces, an interesting effect can be achieved:

In this example, the balls are all of the same size. You can also try to give different “impact forces” to the balls of different sizes, which will have different effects.

Charge

The two forces introduced above are relatively “static”, if only “position force” without “collision force”, the effect is relatively weak. If there were only collision forces and no position forces, the whole picture might not move.

These two forces need to be combined to work well. Here’s another force that makes the ball come alive: charge. This force is literally the force that causes the balls to attract or repel each other directly. Performance is the ability to bring the balls together or apart (note the difference from “collision force”)

The same effect can be achieved by putting the forces collide with the charges that attract each other

Radial

Radail (radial force) is a special force, and there is no comparable force to describe it. Briefly, the force will cause the node to move towards a predetermined radius. This may be difficult to understand, but let’s look at the example:

At this point, the center of the radial force is the center of the canvas. If the force is in a different direction, it behaves differently. In this example, I set the radial force at the lower right corner of the canvas.

Collide can also achieve some interesting effects:

Merger experience

The sample project also provides an experience page for the interaction of the above-mentioned forces. You can open MIX to experience the existence or not of various forces and the relationship between their sizes, and deepen your understanding of these forces through operation.

conclusion

The above is a brief introduction of several basic forces provided by D3-force. By helping us simulate the effects of various common forces, D3-force helps us calculate the positions of different nodes in the complex guiding force, so that we do not have to pay attention to the position of nodes, but focus on the drawing. Of course, for the drawing of common statistical charts, D3 is not as convenient as HighCharts, ECharts, G2 and other charts libraries, but D3 focuses on the lower level. Although it is not as fast as the previous chart library, it has more control areas and provides more powerful customization capabilities. If the business needs are flexible, Consider using D3 to aid in development.

data

  • Example repository: github.com/lastnigtic/…
  • Example experience address: lastnigtic.cn/static-page…
  • Demo experience address: lastnigtic.cn/static-page…

Welcome to point out mistakes or raise questions, exchange with each other, common progress 😁