"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?
- Play with interactive demo to learn more
- See examples: up | down | left | right | with text (v) | with text (h)
- Read the instructions on this page or API reference.
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.on() are deprecated. Both are replaced by
force.compute() which has to be called slightly differently. Please read the change logs.
npm install labella --save
bower install labella --save
// idealPos: The most preferred position for each label// width: The width of each labelvar nodes =1 50 // idealPos, width2 503 503 503 50;var force =;// 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;
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.
Choice 2: AMD
If you use requirejs, Labella.js support AMD out of the box.
Choice 3: node.js / browserify
Labella.js also supports usage in commonjs style.
var labella = ;
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.metrics, which are special modules for demo/evaluation.
Krist Wongsuphasawat / @kristw
Copyright 2015 Twitter, Inc. Licensed under the Apache License Version 2.0