It’s been a long time coming but its finally here! We have just released the newest version of vis.js:
v4! This is a breaking release (hence the version number change). This means the options and the API
have been changed in such a way that it is no longer backwards compatible.
We know it is annoying to go back to your code and making the required changes, but I guarantee that it
is for the best. To help with this migration, we have included an option validator to our new release.
This validator is currently applied on the network, timeline and graph2d. It checks if the options you
supply are of the right type. If your options do not exist or if the type is wrong, it will give
you an understandable message with suggestions of options you may have meant. We think this will make
developing for vis a lot easier, as well as the migration from v3 to v4.
The biggest change in this release is in the network module. We have rewritten the network module in
full and the results are cleanly separated ES6 modules. The option structure has been changed to suit
this structure. The options have also been grouped, making it easier to document and understand. For example,
lets look at the options for fonts. It used to be fontColor, fontFace fontSize, which is now
grouped in a font object with {color:’’,face:’’,size:’’}. Also completely new is the clustering
mechanism. It used to be mostly automatic and twitchy but this new version gives all the control to the
user. This should make the clustering very useful and I’ll be happy to hear of missing features for
this!
We have moved to hammer.js 2 for all of our touch and click events, and a lot of work has gone into
updating all the css elements (especially for timeline) to eliminate conflicts with large frameworks
that overload everything.
Over the last year, we have received a lot of issues on our Github page for which we are very thankful.
Whether it is a bug report, question or feature request, we handle all of them as quickly as we can, and
with these big new rewrites it gives us a new perspective on what is important. We hope the validator
will prevent a lot of issues. The new examples have also been designed to more clearly show simple
options. We plan to provide links to JSBin for all options, but this is a lot of work (for which we
wouldn’t mind some help ;) ).
So what’s next? Well the next module that really needs a good overhaul is the graph2d. This module is
used by us internally quite a lot, and we need to improve the architecture and make it easy to extend it
with new graph types.
We want to unify the code between the timeline and the graph2d even more. The ideal result would be
using a graph2d as a group in the timeline, or use the timeline items in a graph2d without nasty hacks.
The graph2d should get numeric x axis (so not necessarily only time), logarithmic axis and hopefully the
architecture will be flexible enough to allow the x and y axis to be interchanged. The API across the
modules will also be further unified, and I think we’ve made a great start with v4!
From all the modules currently in vis, the graph3d is the oldest and currently the one suffering a lack
of attention. If you are an excited user of the graph3d module and want to contribute, we’re open for
additions to the vis.js team! The graph3d is feature complete but a webgl implementation could be a
great improvement.
I cannot give a timeframe for the things I have discussed here, and we’re always open for ideas and
contributions. If you feel like you want to contribute, let us know :).
Changelog:
General
- Changed the build scripts to include a transpilation of ES6 to ES5
(using http://babel.org), so we can use ES6 features in the vis.js
code.
When creating a custom bundle using browserify, one now needs to add a
transform step using
babelify, this is described in README.md.
Timeline
- Integrated an option configurator and validator.
- Implemented option
multiselect, which is false by default.
- Added method
setData({groups: groups, items: items}).
- Fixed range items not being displayed smaller than 10 pixels (twice the
padding). In order to have overflowing text, one should now apply css style
.vis.timeline .item.range { overflow: visible; } instead of
.vis.timeline .item.range .content { overflow: visible; }.
See example 18_range_overflow.html.
- Fixed invalid css names for time axis grid, renamed hours class names from
4-8h to h4-h8.
- Deprecated option
showCustomTime. Use method addCustomTime() instead.
- Deprecated event
finishedRedraw as it's redundant.
- Renamed option
animate to animation, and changed it to be either a boolean
or an object {duration: number, easingFunction: string}.
- Fixed #831: items losing selection when their type changed.
Graph2d
- New option structure.
- Cleaned up docs.
- Fixed #628: stacking order.
- Fixed #624: sorting order.
- Fixed #616: stacking with negative bars.
- Fixed #728: alignment issues.
- Fixed #716: Height of graph
2px too large when configuring a fixed height.
Network
The network has been completely rewritten. The new modular setup using ES6 classes makes
it future proof for maintainability, extendability and clarity. A summary of new features:
- New examples, categorized by topic.
- New docs.
- New option structure, adhering to the modular setup on the backend.
- New events for user interaction.
- New render events for drawing custom elements on the canvas.
- New physics events for making a loading bar during stabilization.
- A lot of new methods that make extending easier.
- Manipulation system now works without the UI neccesarily.
- Nodes and edges can cast shadows.
- Configurator system to dynamically change almost all options.
- Validator has been created for the network's options, warning you about typo's and suggesting
alternatives.
- Diamond shape for nodes.
- Unified the label code so edges and nodes have the same label settings.
- InheritColors for edges can be set to both, making a gradient fade between two node colors.
- Redesigned the clustering system giving full control over it.
- Random seed can be saved so the network will be the same every time you start it.
- New physics solver based on ForceAtlas2 as implemented in gephi.]
- New avoidOverlap option for physics.
- Many, many bugfixes.
DataSet
- Dropped support for Google visualization DataTable.
- Dropped support for appending data returned by
DataSet.get() to an existing
Array or DataTable.
