Force-directed layout

With the force-directed layout, Kumu positions everything automatically based on the connections between elements. While we've picked default settings that should work for most maps, you may need to tweak these settings, especially if you have a heavily connected or very sparse map.

To customize these defaults, click the Settings icon to open the Basic Editor, then click MORE OPTIONS and select Customize view defaults. Scroll down to the Layout settings section and use the "Preset" dropdown to switch between three default settings:

  • auto
  • dense
  • hairball

If you'd like further control over the layout settings, you can use the Advanced Editor to customize the settings for:

  • Gravity (layout-gravity)
  • Particle charge (layout-particle-charge)
  • Connection length (connection-length)
  • Connection strength (connection-strength)

For example, to re-create the "hairball" setting, add the following to the @settings block :

@settings {
  layout-gravity: 0.0001;
  layout-particle-charge: 300;
  connection-length: 500;
  connection-strength: 0.1;

If you find your map has become a hairball, try the following:

  • Decrease gravity
  • Increase particle charge
  • Lower connection strength

The force-directed layout also allows you to override any element's position by pinning it in place.

Good to know: The stakeholder template and SNA template are set to a force-directed layout by default.

Changing from fixed to force-directed layout:

  1. Click on the Settings icon on the right side of the map
  2. Click MORE OPTIONS and select Customize view defaults
  3. Scroll down to the General settings section to change the "Layout" to "force-directed"
  4. Use your map settings to change the default element behavior to "floating"
  5. If you were previously using a fixed layout, you may need to un-pin all the existing elements. You can do this by pressing Shift+E on your keyboard to select all elements, then click the pin icon in the lower right of the element profile or press Alt+P on your keyboard.

If you would rather do steps 1-3 in the Advanced Editor, here is the code you can use to switch to a force-directed layout:

@settings {
    layout: force;

After you complete all five steps, just move one element, and they will all start to float into the force-directed layout.

edit this page

results matching ""

    powered by

    No results matching ""