Coder Social home page Coder Social logo

fil / d3-force-limit Goto Github PK

View Code? Open in Web Editor NEW

This project forked from vasturiano/d3-force-limit

0.0 1.0 0.0 43 KB

A positioning hard limit force type for the d3-force simulation engine

Home Page: https://observablehq.com/@vasturiano/d3-force-limit

License: MIT License

JavaScript 100.00%

d3-force-limit's Introduction

d3.forceLimit

NPM package Build Size Dependencies

A force type for the d3-force simulation engine to hard limit nodes positions to a specified range. See demo.

It can be used, for example to keep nodes within boundaries.

It also features a cushioning force that repels nodes away from the boundaries. This can be useful to prevent nodes from accumulating at the edge of the canvas.

This force works best if it is used as the last force in the simulation engine chain.

See also d3.forceSurface.

Quick start

import d3ForceLimit from 'd3-force-limit';

or

d3.forceLimit = require('d3-force-limit');

or even

<script src="//unpkg.com/d3-force-limit"></script>

then

d3.forceSimulation()
    .nodes(<myNodes>)
    .force('limit', d3.forceLimit()
        .x0(20)
        .x1(45)
    );

API reference

Method Description Default
radius([num or fn]) Getter/setter for the node radius accessor function (fn(node)) or a constant (num) for all nodes. 1
x0([num or fn]) Getter/setter for the minimum X accessor function (fn(node)) or a constant (num) for all nodes. -Infinity
x1([num or fn]) Getter/setter for the maximum X accessor function (fn(node)) or a constant (num) for all nodes. Infinity
y0([num or fn]) Getter/setter for the minimum Y accessor function (fn(node)) or a constant (num) for all nodes. -Infinity
y1([num or fn]) Getter/setter for the maximum Y accessor function (fn(node)) or a constant (num) for all nodes. Infinity
z0([num or fn]) Getter/setter for the minimum Z accessor function (fn(node)) or a constant (num) for all nodes. Only applicable when using a 3-dimensional force engine. -Infinity
z1([num or fn]) Getter/setter for the maximum Z accessor function (fn(node)) or a constant (num) for all nodes. Only applicable when using a 3-dimensional force engine. Infinity
cushionWidth([num]) Getter/setter for the thickness (in px) of the cushioning force that repels nodes away from the specified boundaries. Nodes outside this cushion margin will not be affected. 0
cushionStrength([num]) Getter/setter for the intensity or elasticity (measured in px/tick²) of the boundary cushion. The higher this value the stronger nodes within the cushion margin will be pushed back. The intensity of this force increases linearly with the portion of cushion that has been crossed, being at full intensity when the node is touching the boundary. 0.01

d3-force-limit's People

Contributors

vasturiano avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.