Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including labella with all npm packages installed. Try it out:

var labella = require("labella")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

labella v1.1.4

May the force label you.

Docs ▸ Introduction | Development | Demo   ////   API Reference ▸ Force | Node | Renderer

Labella.js NPM version Build Status

"Labels should be beautiful."

If you try to place labels for points on a timeline (or any 1D space), one common problem is the labels often overlap. How about making the labels push each other and find where they can stay with overlapping?

Moreover, if you are looking for a ready-to-use timeline component with Labella's smart labeling instead of building your own timeline from scratch, check out d3Kit-timeline.

Note: For users who are upgrading from v0.x.x to v1.x.x. The API has changed. force.start() and force.on() are deprecated. Both are replaced by force.compute() which has to be called slightly differently. Please read the change logs.

Install

npm install labella --save

or

bower install labella --save

Example

// idealPos: The most preferred position for each label
// width:    The width of each label
var nodes = [
  new labella.Node(1, 50), // idealPos, width
  new labella.Node(2, 50),
  new labella.Node(3, 50),
  new labella.Node(3, 50),
  new labella.Node(3, 50),
];

var force = new labella.Force()
  .nodes(nodes)
  .compute();

// The rendering is independent from this library.
// User can use canvas, svg or any library to draw the labels.
// There is also a built-in helper for this purpose. See labella.Renderer
draw(force.nodes());

Import into your project

Choice 1. Global

Adding this library via <script> tag is the simplest way. By doing this, labella is available in the global scope.

<script src="labella.min.js"></script>
Choice 2: AMD

If you use requirejs, Labella.js support AMD out of the box.

require(['path/to/labella'], function(labella) {
  // do something
});
Choice 3: node.js / browserify

Labella.js also supports usage in commonjs style.

var labella = require('path/to/labella');

Files

The dist directory contains four variations of this library:

  • labella.js and labella.min.js : Core functionalities. This is what you will need for regular use.
  • labella-extra.js and labella-extra.min.js (since v1.1.0) : Same content with the above bundle plus labella.util and labella.metrics, which are special modules for demo/evaluation.

Author

Krist Wongsuphasawat / @kristw

Copyright 2015 Twitter, Inc. Licensed under the Apache License Version 2.0

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free