search

Likbjorn / tag-cloud

Frontend representation for cloud of linked tags
MIT License
0 stars 0 forks source link

Do not change size of node on window size change #38

Closed Likbjorn closed 4 years ago

Likbjorn commented 4 years ago

Nodes must have fixed size when window is resized.

How it works now: SVG has local coordinates with bounds defined by viewBox attribute. All coordinates and sizes of image elements are relative to width and height provided in viewBox. The image is then automatically scaled to the size of parent container, preserving aspect ratio as defined by preserveAspectRatio attribute.

Result can be achieved using two different approaches:

  1. Simulation parameters are fixed, node and link visualisation parameters change: node radius, font size, link stroke. This way makes handling the simulation easier, but size of elements can not be defined in .css file.
  2. viewBox bounds are changed on window resize. Visualisation can be easily descripted in .css, but all simulation parameters must be scaled.
Likbjorn commented 4 years ago

Option 2 is easier to implement and maintain.

viewBox bounds meet the size of SVG container. Simulation parameters change on container resize: center of center force is adjusted, repelling force is scaled, link distance is scaled.