You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
881 lines
43 KiB
881 lines
43 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>(function (i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r;
|
|
i[r] = i[r] || function () {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date();
|
|
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
|
|
a.async = 1;
|
|
a.src = g;
|
|
m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
ga('create', 'UA-61231638-1', 'auto');
|
|
ga('send', 'pageview');</script>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" HREF="favicon.ico">
|
|
<title>vis.js - A dynamic, browser based visualization library.</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="./css/bootstrap.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
|
|
<script src="./js/smooth-scroll.min.js"></script>
|
|
<script language="JavaScript">
|
|
smoothScroll.init();
|
|
</script>
|
|
|
|
<style>
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;
|
|
height: 100%;
|
|
background: url('./images/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
|
|
}
|
|
|
|
img.icon {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
div.navbar-wrapper {
|
|
background-color: #07508E;
|
|
border-bottom: 3px solid #ffffff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
div.center {
|
|
width: 970px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
div.container.small {
|
|
max-width: 970px;
|
|
}
|
|
|
|
div.blogHeader {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
width: 910px;
|
|
padding: 0px 30px 0px 30px;
|
|
margin-top: -150px;
|
|
color: #ffffff;
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
div.post {
|
|
margin: 40px 80px 0px 190px;
|
|
padding: 10px 10px 10px 20px;;
|
|
border: 1px solid #eeeeee;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
div.postHeader {
|
|
float: left;
|
|
font-size: 30px;
|
|
}
|
|
|
|
div.postDate {
|
|
margin-top: 19px;
|
|
float: right;
|
|
font-size: 12px;
|
|
}
|
|
|
|
div.postAuthor {
|
|
padding-left: 5px;
|
|
margin-top: 19px;
|
|
margin-right: 20px;
|
|
float: right;
|
|
font-size: 12px;
|
|
}
|
|
|
|
div.postContent {
|
|
font-size: 16px;
|
|
margin-top: 50px;
|
|
padding: 10px 20px 0px 20px;
|
|
text-align: justify;
|
|
}
|
|
|
|
div.full {
|
|
min-height: 100%;
|
|
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
|
|
padding: 0px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
div.postsMenu {
|
|
position: relative;
|
|
left: -15px;
|
|
top: -50px;
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
div.postsMenuContent {
|
|
padding: 10px;
|
|
background-color: #6787a6;
|
|
width: 180px;
|
|
height: 500px;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
a.post {
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
color: #ffffff;
|
|
display: block;
|
|
margin: 10px 0px 0px 0px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<!-- NAVBAR
|
|
================================================== -->
|
|
<body>
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="container">
|
|
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
|
|
aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="./index.html#modules">Modules</a></li>
|
|
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
|
|
src="./images/external-link-icons/external-link-icon-white.png"></a>
|
|
</li>
|
|
<li class="active"><a href="#">Blog</a></li>
|
|
<li><a href="./index.html#download_install">Download</a></li>
|
|
<li><a href="./showcase/index.html">Showcase</a></li>
|
|
<li><a href="./index.html#contribute">Contribute</a></li>
|
|
<li><a href="./featureRequests.html">Feature requests</a></li>
|
|
<li><a href="./index.html#licenses">License</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img
|
|
style="position: absolute; top: 0; right: 0; border: 0;"
|
|
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
|
|
alt="Fork me on GitHub"
|
|
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
|
|
<div class="container full small">
|
|
<div class="center">
|
|
<img src="./images/wallHeader.png">
|
|
</div>
|
|
|
|
<div class="blogHeader">
|
|
<h1>vis.js</h1>
|
|
|
|
<p>A dynamic, browser based visualization library.
|
|
The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. This blog is about
|
|
the latest developments, roadmap and releases.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="postsMenu">
|
|
<div class="postsMenuContent">
|
|
Posts:
|
|
<a data-scroll class="post" href="#V4Release">- V4, ES6 and what's next</a>
|
|
<a data-scroll class="post" href="#Released version 3.11.0">- Released version 3.11.0</a>
|
|
<a data-scroll class="post" href="#Released version 3.10.0">- Released version 3.10.0</a>
|
|
<a data-scroll class="post" href="#Released version 3.9.0">- Released version 3.9.0</a>
|
|
<a data-scroll class="post" href="#The 2015 roadmap for vis.js">- The 2015 roadmap for vis.js</a>
|
|
<a data-scroll class="post" href="#A look back on vis.js">- A look back on vis.js</a>
|
|
<a data-scroll class="post" href="#New website for vis.js!">- New website for vis.js!</a>
|
|
<a data-scroll class="post" href="#Released version 3.8.0">- Released version 3.8.0</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="V4Release">V4, ES6 and what's next</div>
|
|
<div class="postAuthor">by <a href="https://github.com/alexdm0">Alex</a></div>
|
|
<div class="postDate">22nd of May 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
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!
|
|
</p>
|
|
|
|
<p>
|
|
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 <i>everything</i>.
|
|
</p>
|
|
|
|
<p>
|
|
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 ;) ).
|
|
</p>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
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!
|
|
</p>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
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 :).
|
|
</p>
|
|
|
|
<h3>Changelog:</h3>
|
|
|
|
<h4>General</h4>
|
|
|
|
<ul>
|
|
<li>Changed the build scripts to include a transpilation of ES6 to ES5
|
|
(using <a href="http://babel.org">http://babel.org</a>), 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 <code>babelify</code>, this is described in README.md.
|
|
</li>
|
|
</ul>
|
|
|
|
<h4>Timeline</h4>
|
|
|
|
<ul>
|
|
<li>Integrated an option configurator and validator.</li>
|
|
<li>Implemented option <code>multiselect</code>, which is false by default.</li>
|
|
<li>Added method <code>setData({groups: groups, items: items})</code>.</li>
|
|
<li>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
|
|
<code>.vis.timeline .item.range { overflow: visible; }</code> instead of
|
|
<code>.vis.timeline .item.range .content { overflow: visible; }</code>.
|
|
See example 18_range_overflow.html.
|
|
</li>
|
|
<li>Fixed invalid css names for time axis grid, renamed hours class names from
|
|
<code>4-8h</code> to <code>h4-h8</code>.
|
|
</li>
|
|
<li>Deprecated option <code>showCustomTime</code>. Use method <code>addCustomTime()</code> instead.</li>
|
|
<li>Deprecated event <code>finishedRedraw</code> as it's redundant.</li>
|
|
<li>Renamed option <code>animate</code> to <code>animation</code>, and changed it to be either a boolean
|
|
or an object <code>{duration: number, easingFunction: string}</code>.
|
|
</li>
|
|
<li>Fixed #831: items losing selection when their type changed.</li>
|
|
</ul>
|
|
|
|
<h4>Graph2d</h4>
|
|
|
|
<ul>
|
|
<li>New option structure.</li>
|
|
<li>Cleaned up docs.</li>
|
|
<li>Fixed #628: stacking order.</li>
|
|
<li>Fixed #624: sorting order.</li>
|
|
<li>Fixed #616: stacking with negative bars.</li>
|
|
<li>Fixed #728: alignment issues.</li>
|
|
<li>Fixed #716: Height of graph <code>2px</code> too large when configuring a fixed height.</li>
|
|
</ul>
|
|
|
|
<h4>Network</h4>
|
|
|
|
<p>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:</p>
|
|
|
|
<ul>
|
|
<li>New examples, categorized by topic.</li>
|
|
<li>New docs.</li>
|
|
<li>New option structure, adhering to the modular setup on the backend.</li>
|
|
<li>New events for user interaction.</li>
|
|
<li>New render events for drawing custom elements on the canvas.</li>
|
|
<li>New physics events for making a loading bar during stabilization.</li>
|
|
<li>A lot of new methods that make extending easier.</li>
|
|
<li>Manipulation system now works without the UI neccesarily.</li>
|
|
<li>Nodes and edges can cast shadows.</li>
|
|
<li>Configurator system to dynamically change almost all options.</li>
|
|
<li>Validator has been created for the network's options, warning you about typo's and suggesting
|
|
alternatives.
|
|
</li>
|
|
<li>Diamond shape for nodes.</li>
|
|
<li>Unified the label code so edges and nodes have the same label settings.</li>
|
|
<li>InheritColors for edges can be set to both, making a gradient fade between two node colors.</li>
|
|
<li>Redesigned the clustering system giving full control over it.</li>
|
|
<li>Random seed can be saved so the network will be the same every time you start it.</li>
|
|
<li>New physics solver based on ForceAtlas2 as implemented in gephi.]</li>
|
|
<li>New avoidOverlap option for physics.</li>
|
|
<li>Many, many bugfixes.</li>
|
|
</ul>
|
|
|
|
<h4>DataSet</h4>
|
|
|
|
<ul>
|
|
<li>Dropped support for Google visualization DataTable.</li>
|
|
<li>Dropped support for appending data returned by <code>DataSet.get()</code> to an existing
|
|
Array or DataTable.
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="Released version 3.11.0">Released version 3.11.0</div>
|
|
<div class="postAuthor">by <a href="https://github.com/josdejong">Jos</a></div>
|
|
<div class="postDate">6th of March 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
Today we released vis.js version 3.11.0. The Timeline has gotten quite some attention in this release:
|
|
For example, the Timeline finally has gotten more event handlers to enable custom behavior in a flexible
|
|
way. Network is evolving at a steady speed. It's really great to get more and more substantial
|
|
contributions from the community latest months! Thanks.
|
|
</p>
|
|
|
|
<p>Changelog:</p>
|
|
|
|
<h3>Network</h3>
|
|
|
|
<ul>
|
|
<li>(added gradient coloring for lines, but set for release in 4.0 due to required refactoring of
|
|
options).
|
|
</li>
|
|
<li>Fixed bug where a network that has frozen physics would resume redrawing after setData, setOptions
|
|
etc.
|
|
</li>
|
|
<li>Added option to bypass default groups. If more groups are specified in the nodes than there are in
|
|
the groups, loop over supplied groups instead of default.
|
|
</li>
|
|
<li>Added two new static smooth curves modes: curveCW and curve CCW.</li>
|
|
<li>Added request redraw for certain internal processes to reduce number of draw calls (performance
|
|
improvements!).
|
|
</li>
|
|
<li>Added pull request for usage of Icons. Thanks @Dude9177!
|
|
<li>Allow hierarchical view to be set in setOptions.</li>
|
|
<li>Fixed manipulation bar for mobile.</li>
|
|
<li>Fixed #670: Bug when updating data in a DataSet, when Network is connected to the DataSet via a
|
|
DataView.
|
|
</li>
|
|
<li>Fixed #688: Added a css class to be able to distinguish buttons "Edit node" and "Edit edge".</li>
|
|
</ul>
|
|
|
|
<h3>Timeline</h3>
|
|
|
|
<ul>
|
|
<li>Implemented orientation option `'both'`, displaying a time axis both on top
|
|
and bottom (#665).
|
|
</li>
|
|
<li>Implemented creating new range items by dragging in an empty space with the
|
|
ctrl key down.
|
|
</li>
|
|
<li>Implemented configuration option `order: function` to define a custom ordering
|
|
for the items (see #538, #234).
|
|
</li>
|
|
<li>Implemented events `click`, `doubleClick`, and `contextMenu`.</li>
|
|
<li>Implemented method `getEventProperties(event)`.</li>
|
|
<li>Fixed not property initializing with a DataView for groups.</li>
|
|
<li>Merged add custom timebar functionality, thanks @aytech!
|
|
<li>Fixed #664: end of item not restored when canceling a move event.</li>
|
|
<li>Fixed #609: reduce the left/right dragarea when an item range is very small,
|
|
so you can still move it as a whole.
|
|
</li>
|
|
<li>Fixed #676: misalignment of background items when using subgroups and the
|
|
group label's height is larger than the contents.
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Graph2d</h3>
|
|
|
|
<ul>
|
|
<li>Implemented events `click`, `doubleClick`, and `contextMenu`.</li>
|
|
<li>Implemented method `getEventProperties(event)`.</li>
|
|
</ul>
|
|
|
|
<h3>DataSet/DataView</h3>
|
|
|
|
<ul>
|
|
<li>Implemented support for mapping field names. Thanks @spatialillusions.</li>
|
|
<li>Fixed #670: DataView not passing a data property on update events (see #670)
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="Released version 3.10.0">Released version 3.10.0</div>
|
|
<div class="postAuthor">by <a href="https://github.com/josdejong">Jos</a></div>
|
|
<div class="postDate">11th of February 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
Version 3.10.0 has been released. Lots of improvements in Network, and some smaller bug fixes and
|
|
improvements in Timeline and DataSet.
|
|
</p>
|
|
|
|
<p>Changelog:</p>
|
|
|
|
<h3>Network</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Added option bindToWindow (default true) to choose whether the keyboard binds are global or to the
|
|
network div.
|
|
</li>
|
|
<li>Improved images handling so broken images are shown on all references of images that are broken.
|
|
</li>
|
|
<li>Added getConnectedNodes method.</li>
|
|
<li>Added fontSizeMin, fontSizeMax, fontSizeMaxVisible, scaleFontWithValue, fontDrawThreshold to
|
|
Nodes.
|
|
</li>
|
|
<li>Added fade in of labels (on nodes) near the fontDrawThreshold.</li>
|
|
<li>Added nodes option to zoomExtent to zoom in on specific set of nodes.</li>
|
|
<li>Added stabilizationIterationsDone event which fires at the end of the internal stabilization run.
|
|
Does not imply that the network is stabilized.
|
|
</li>
|
|
<li>Added freezeSimulation method.</li>
|
|
<li>Added clusterByZoom option.</li>
|
|
<li>Added class name 'network-tooltip' to the tooltip, allowing custom styling.</li>
|
|
<li>Fixed bug when redrawing was not right on zoomed-out browsers.</li>
|
|
<li>Added opacity option to edges. Opacity is only used for the unselected state.</li>
|
|
<li>Fixed bug where selections from removed data elements persisted.</li>
|
|
</ul>
|
|
|
|
<h3>Timeline</h3>
|
|
<ul class="task-list">
|
|
<li>`Timeline.redraw()` now also recalculates the size of items.</li>
|
|
<li>Implemented option `snap: function` to customize snapping to nice date when dragging items.</li>
|
|
<li>Implemented option `timeAxis: {scale: string, step: number}` to set fixed scale.</li>
|
|
<li>Fixed width of range items not always being maintained when moving due to snapping to nice dates.
|
|
</li>
|
|
<li>Fixed not being able to drag items to an other group on mobile devices.</li>
|
|
<li>Fixed `setWindow` not working when applying an interval larger than the configured `zoomMax`.</li>
|
|
</ul>
|
|
|
|
<h3>DataSet/DataView</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Added property `length` holding the total number of items to the `DataSet and `DataView`.</li>
|
|
<li>Added a method `refresh()` to the `DataView`, to update filter results.</li>
|
|
<li>Fixed a bug in the `DataSet` returning an empty object instead of `null` when no item was found when
|
|
using both a filter and specifying fields.
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="Released version 3.9.0">Released version 3.9.0</div>
|
|
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
|
|
<div class="postDate">16th of January 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
We have been very busy fixing a lot of the open Github issues over the last week. We have also received
|
|
multiple pull requests that could be added quickly! Special thanks to
|
|
our community members contributing this release: @klmdb, @pavlos256, @T-rav, @brendon1982.
|
|
Since this is a release with new features, we push the version number up to 3.9.0. Next up: big
|
|
refactoring and version 4.0.0!
|
|
</p>
|
|
|
|
<p>Changelog:</p>
|
|
|
|
<h3>
|
|
<a class="anchor" href="#network" aria-hidden="true"><span class="octicon octicon-link"></span></a>Network
|
|
</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Reverted change in image class, fixed bug #552</li>
|
|
<li>Improved the fontFill offset between different browsers. #365</li>
|
|
<li>Fixed dashed lines on firefox on Unix systems</li>
|
|
<li>Altered the Manipulation Mixin to be succesfully destroyed from memory when calling destroy();</li>
|
|
<li>Improved drawing of arrowheads on smooth curves. #349</li>
|
|
<li>Caught case where click originated on external DOM element and drag progressed to vis.</li>
|
|
<li>Added label stroke support to Nodes, Edges & Groups as per-object or global settings. Thank you
|
|
@klmdb!
|
|
</li>
|
|
<li>Reverted patch that made nodes return to 'default' setting if no group was assigned to fix issue
|
|
#561.
|
|
The correct way to 'remove' a group from a node is to assign it a different one.
|
|
</li>
|
|
<li>Made the node/edge selected by the popup system the same as selected by the click-to-select system.
|
|
Thank you @pavlos256!
|
|
</li>
|
|
<li>Improved edit edge control nodes positions, altered style a little.</li>
|
|
<li>Fixed issue #564 by resetting state to initial when no callback is performed in the return
|
|
function.
|
|
</li>
|
|
<li>Added condition to Repulsion similar to BarnesHut to ensure nodes do not overlap.</li>
|
|
<li>Added labelAlignment option to edges. Thanks @T-rav!</li>
|
|
<li>Close active sessions in dataManipulation when calling setData().</li>
|
|
</ul>
|
|
|
|
<h3>
|
|
<a class="anchor" href="#timeline" aria-hidden="true"><span class="octicon octicon-link"></span></a>Timeline
|
|
</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Added byUser flag to options of the rangechange and rangechanged event.</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="The 2015 roadmap for vis.js">The 2015 roadmap for vis.js</div>
|
|
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
|
|
<div class="postDate">9th of January 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
I initially wanted to do a small recap of vis.js so far but it became larger (and more off topic) than I
|
|
expected. To understand some of the motivations for our roadmap, <a href="#A look back on vis.js">take a
|
|
look at the post below this one first</a>.
|
|
</p>
|
|
|
|
<p>
|
|
So now for our plans for 2015! We have added a lot of features over the last year, and we have to be
|
|
careful that vis does not die of option-obesity. To mediate this we thought of a few solutions.
|
|
Firstly, we will make the docs collapsible using a similar system to <a
|
|
href="https://www.jsoneditoronline.org/" target="_blank">Jos′s great online JSON editor</a>.
|
|
This is naturally a temporary fix but
|
|
the docs are one of the most important ways to get information. We think we ourselves may be the most
|
|
frequent visitor of those pages so it's a good start!
|
|
</p>
|
|
|
|
<p>
|
|
Secondly, the actual changes, we plan to reorganize some of the option structure. This will
|
|
unfortunately (but by definition) be a breaking change from our old versions. The new structure will be
|
|
clearer and more intuitive. The work our current
|
|
users will have to do to update will be minimal. If you're using the options we reorganize, you'll have
|
|
to update your options. Breaking releases are always a shame, but we feel it is necessary.
|
|
</p>
|
|
|
|
<p>
|
|
The third step we want to take is to go over the code of each module and modularize everything much
|
|
more. This will make the code easier to maintain as we move away from very large .js files, as well as
|
|
make it easier to expand on.
|
|
</p>
|
|
|
|
<p>
|
|
Once everything is modularized, we want to change the API to allow users to plug their own parts of vis
|
|
together. As an example: You start a network module, plug in the type of node module, edge module,
|
|
physics module and optionally navigation module (etc.) and you're good to go!
|
|
All of these modules will be individually configured. This means the huge list of options will be
|
|
segmented into smaller, more manageable parts. Additionally, the docs will become smaller and clearer.
|
|
</p>
|
|
|
|
<p>
|
|
Of course, we do not want to abandon all our plug-and-play functionality! We will also start to supply
|
|
more preconfigured constructors (i.e. a vis.BarChart that will give you a preconfigured graph2d module).
|
|
Apart from these constructors
|
|
we will continue to publish examples which will include code snippets that you can use in your own
|
|
project.
|
|
</p>
|
|
|
|
<p>
|
|
Once this has been completed, we expect there will be more options that accept functions as arguments
|
|
which gives you more control over vis. Finally, because everything (well, more than now) would be split
|
|
up into
|
|
modules, it becomes easier for the community to create additional modules, further improving vis!
|
|
</p>
|
|
|
|
<p>
|
|
The things I have listed here are the ideas that we have now. This is subject to change. We also cannot
|
|
provide a timeline for this because we work on vis whenever we have time. No deadlines, no constrains,
|
|
just when we have time.
|
|
</p>
|
|
|
|
<p>
|
|
To wrap up, there are a few things I did not mention here but I'd like to add to the post anyway.
|
|
<ul>
|
|
<li>We want to improve the fusion of graph2d and the timeline, with the ideal that a graph2d can be used
|
|
like a group in timeline now.
|
|
</li>
|
|
<li>Examples will be split in simple option/configuration examples and larger, feature
|
|
demonstration/exploration examples.
|
|
</li>
|
|
<li>Graph2d will be expanded.</li>
|
|
<li>We will move to hammer.js 2.0.</li>
|
|
<li>We will add features <a href="./featureRequests.html" target="_blank">from the list</a> when we can
|
|
</li>
|
|
<li>We hope to keep up the
|
|
<communi></communi>
|
|
cation with our community!
|
|
</li>
|
|
</ul>
|
|
Let's make 2015 as good as last year!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="A look back on vis.js">A look back on vis.js</div>
|
|
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
|
|
<div class="postDate">9th of January 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
In April 2013, the initial commit was made for vis.js by <a href="https://github.com/josdejong">Jos</a>
|
|
because the old CHAP LINKS library was becoming too large to expand and maintain.
|
|
Vis.js was a clean, new start using all the knowledge gathered from the CHAP library with the ideal that
|
|
the new infrastructure would be more stable, faster and easier to maintain.
|
|
</p>
|
|
|
|
<p>
|
|
In January 2014, I joined the project and started to expand the Network module, which was called Graph
|
|
back then. I have been working alongside Jos since then we have poured a lot of hours into vis.
|
|
</p>
|
|
|
|
<p>
|
|
On the 16th of April 2014, exactly a year after the initial commit, <a
|
|
href="https://twitter.com/hackernewsbot/status/456231005678874624" target="_blank">a twitterbot with
|
|
a lot of followers</a> notified
|
|
the world that we were featured on hackernews! This was the boost we needed to really reach a large
|
|
community. We saw the amount of visitors and Github stars increase greatly over the months that
|
|
followed.
|
|
</p>
|
|
|
|
<p>
|
|
The 14th of October, we have altered the license of vis.js to MIT or APACHE 2.0. This allowed <a
|
|
href="http://tiddlywiki.com/" target="_blank">Tiddlywiki</a> to add vis.js to their keychain. From
|
|
what we hear,
|
|
their developers really enjoy working with vis and we look forward to hearing how their community uses
|
|
our software!
|
|
</p>
|
|
|
|
<p>
|
|
Now, we have a great community that helps out in issues, fixes our typos in the docs, notifies us of
|
|
bugs and sometimes fixes them for us. We have received pull requests with new features and improvements
|
|
and
|
|
it has been fantastic!
|
|
</p>
|
|
|
|
<p>
|
|
This post started out as the roadmap for vis in 2015, but the review was longer than I initially
|
|
expected thereby deserving its own post.
|
|
</p>
|
|
|
|
<p>
|
|
Have fun using vis!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="New website for vis.js!">New website for vis.js!</div>
|
|
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
|
|
<div class="postDate">9th of January 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
The old website served us well, but now that we arrived in 2015... it is really time for an upgrade! We
|
|
hope the new website is more informative, modern and a good promotion for vis.js!
|
|
It also allows us to keep the community updated through this blog and to <a href="./showcase/index.html"
|
|
target="_blank">show off
|
|
great projects that make use of vis.js in our showcase</a>.
|
|
</p>
|
|
|
|
<p>If you have made something and would like it featured,
|
|
please make an <a href="https://github.com/almende/vis/issues" target="_blank">issue on Github</a> with
|
|
your project and how you'd like to be credited.</p>
|
|
</p><p>
|
|
The new website is in beta so if anyone spots a typo or other mistake, please let us know on our <a
|
|
href="https://www.github.com/almende/vis" target="_blank">Github</a> page.
|
|
</p>
|
|
|
|
<p>
|
|
There is no forum on this website. We prefer to keep all the communication with the community through
|
|
Github. We believe this is the best solution so everyone only has to check the Github issues
|
|
when there is a problem or suggestion.
|
|
</p>
|
|
|
|
<p>
|
|
A big change introduced with our new website, is the <a href="./featureRequests.html" target="_blank">feature
|
|
request page</a>. There are a lot of issues on Github that suggest features but we do not
|
|
always have time to implement these ourselves. On the other hand, there have been issues where people
|
|
tell us they want to contribute but are now sure where to start. To mediate this (and to make a clear
|
|
overview
|
|
for ourselves) we listed everything <a href="./featureRequests.html" target="_blank">here</a>.
|
|
</p>
|
|
|
|
<p>Once a feature is added to <a href="./featureRequests.html" target="_blank">the list</a>, it is not the
|
|
end of the line. At each new release, we'll look at the list and see which features we may want to pick
|
|
up for the next one. Discussions on these features
|
|
can still continue on the referenced Github issues. When we have added a feature to this list, we will
|
|
close the Github issue that requested it to keep our open issues more of a bug-todo list. The main
|
|
motivation for this
|
|
is because we have noticed that old bugs (on pages after 2) would be overlooked from time to time.
|
|
</p>
|
|
|
|
<p>
|
|
This feature page is an experiment. If it turns out that the community does not like us closing issues
|
|
with open feature requests or if it does not have the impact we'd like it to have, we'll revert back to
|
|
the old model.
|
|
</p>
|
|
|
|
<p>
|
|
We thank you all for using vis! Last year has seen a great increase in our user base and it is a great
|
|
motivating factor knowing that our work is used by others!
|
|
</p>
|
|
|
|
<p>
|
|
Here's to a great 2015!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post">
|
|
<div class="postHeader" id="Released version 3.8.0">Released version 3.8.0</div>
|
|
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
|
|
<div class="postDate">9th of January 2015</div>
|
|
<div class="postContent">
|
|
<p>
|
|
We're proud to present a new version of the vis.js library: 3.8.0! This release has a lot of new
|
|
features and bugfixes, nearly all of which were suggested and/or discovered
|
|
by our community on <a href="https://www.github.com/almende/vis" target="_blank">Github</a>. A lot of
|
|
the issues on Github have been handled in this release and it is likely to be the
|
|
last release before 4.0.0. The 4.0.0 release will break compatibility with old code (only options will
|
|
be revisited on the API side) but more on that in <a href="#The 2015 roadmap for vis.js">the roadmap
|
|
post</a>.
|
|
</p>
|
|
|
|
<p>Changelog:</p>
|
|
|
|
<h3>
|
|
<a class="anchor" href="#network" aria-hidden="true"><span class="octicon octicon-link"></span></a>Network
|
|
</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Fixed flipping of hierarchical network on update when using RL and DU.</li>
|
|
<li>Added zoomExtentOnStabilize option to network.</li>
|
|
<li>Improved destroy function, added them to the examples.</li>
|
|
<li>Nodes now have bounding boxes that are used for zoomExtent.</li>
|
|
<li>Made physics more stable (albeit a little slower).</li>
|
|
<li>Added a check so only one 'activator' overlay is created on clickToUse.</li>
|
|
<li>Made global color options for edges overrule the inheritColors.</li>
|
|
<li>Improved cleaning up of the physics configuration on destroy and in options.</li>
|
|
<li>Made nodes who lost their group revert back to default color.</li>
|
|
<li>Changed group behaviour, groups now extend the options, not replace. This allows partial defines of
|
|
color.
|
|
</li>
|
|
<li>Fixed bug where box shaped nodes did not use hover color.</li>
|
|
<li>Fixed Locales docs.</li>
|
|
<li>When hovering over a node that does not have a title, the title of one of the connected edges that
|
|
HAS a title is no longer shown.
|
|
</li>
|
|
<li>Fixed error in repulsion physics model.</li>
|
|
<li>Improved physics handling for smoother network simulation.</li>
|
|
<li>Fixed infinite loop when an image can not be found and no brokenImage is provided.</li>
|
|
<li>Added getBoundingBox method.</li>
|
|
<li>Community fix for SVG images in IE11, thanks @dponch!</li>
|
|
<li>Fixed repeating stabilized event when the network is already stabilized.</li>
|
|
<li>Added circularImages, thanks for the contribution @brendon1982!</li>
|
|
</ul>
|
|
|
|
<h3>
|
|
<a class="anchor" href="#graph2d" aria-hidden="true"><span class="octicon octicon-link"></span></a>Graph2d
|
|
</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Fixed round-off errors of zero on the y-axis.</li>
|
|
<li>added show major/minor lines options to dataAxis.</li>
|
|
<li>Fixed adapting to width and height changes.</li>
|
|
<li>Added a check so only one 'activator' overlay is created on clickToUse.</li>
|
|
<li>DataAxis width option now draws correctly.</li>
|
|
</ul>
|
|
|
|
<h3>
|
|
<a class="anchor" href="#timeline" aria-hidden="true"><span class="octicon octicon-link"></span></a>Timeline
|
|
</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Implemented support for styling of the vertical grid.</li>
|
|
<li>Support for custom date formatting of the labels on the time axis.</li>
|
|
<li>added show major/minor lines options to timeline.</li>
|
|
<li>Added a check so only one 'activator' overlay is created on clickToUse.</li>
|
|
</ul>
|
|
|
|
<h3>
|
|
<a class="anchor" href="#graph3d" aria-hidden="true"><span class="octicon octicon-link"></span></a>Graph3d
|
|
</h3>
|
|
|
|
<ul class="task-list">
|
|
<li>Fixed mouse coordinates for tooltips.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script src="./js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="./js/ie10-viewport-bug-workaround.js"></script>
|
|
|