gra

gravitybox

Module for the browser that creates a bounded D3 force layout in which each node added has 'gravity' that makes it fall to the bottom of the box, which respecting collisions with other nodes.

Showing:

Popularity

Downloads/wk

2

GitHub Stars

1

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gravitybox

Module the browser that creates a bounded D3 force layout in which each node added has 'gravity' that makes it fall to the bottom of the box, which respecting collisions with other nodes.

Check it out.

Installation

npm install gravitybox

Usage

In your html:

<script src="node_modules/gravitybox/gravitybox.js">

In your JavaScript, create an instance of gravitybox:

var gravitybox = createGravityBox({
  root: d3.select('g#boxroot'),
  width: 400,
  height: 600,
  nodeClass: 'node',
  nodeElementName: 'circle',
  xAttr: 'cx',
  yAttr: 'cy'      
});

nodeClass can be anything. nodeElementName can be any SVG element that can be positioned with two attributes, such as cx and cy for a circle.

Make an array of nodes to pass to gravitybox.add(). Each node should have an initial x and y position. (gravitybox will map x and y to whatever you specify as xAttr and yAttr.) You can also specify attributes and styles to apply to the node elements.

{
  x: 20,
  y: 0,
  attrs: {
  r: 15
  },
  styles: {
    fill: 'papaya',
    stroke: 'lightsteelblue'
  }
}

Call gravitybox.render().

Look at the code in /example for more detail.

License

MIT.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100