Released v3.9.0

docs/network.html

@@ -932,6 +932,18 @@ All options defined per-node override these global settings.
         <td>undefined</td>
         <td>If a color is supplied, there will be a background color behind the label. If left undefined, no background color is shown.</td>
     </tr>
+    <tr>
+        <td class="greenField">fontStrokeWidth</td>
+        <td>Number</td>
+        <td>0</td>
+        <td>The width of the label stroke (border around label's text) in pixels.</td>
+    </tr>
+    <tr>
+        <td class="greenField">fontStrokeColor</td>
+        <td>String</td>
+        <td>'white'</td>
+        <td>The color of the label stroke.</td>
+    </tr>
 
 <tr>
     <td  class="greenField">shape</td>
@@ -1156,15 +1168,19 @@ var options = {
       <td>Font fill for the background color of the text label of the edge.
       Only applicable when property <code>label</code> is defined.</td>
   </tr>
-
   <tr>
-  <td class="greenField">style</td>
-      <td>string</td>
-      <td>line</td>
-      <td>Define a line style for the edge.
-      Choose from <code>line</code> (default), <code>arrow</code>,
-      <code>arrow-center</code>, or <code>dash-line</code>.
-      </td>
+      <td class="greenField">fontStrokeWidth</td>
+      <td>Number</td>
+      <td>0</td>
+      <td>The width of the label stroke (border around label's text) in pixels.
+      Only applicable when property <code>label</code> is defined.</td>
+  </tr>
+  <tr>
+      <td class="greenField">fontStrokeColor</td>
+      <td>String</td>
+      <td>'white'</td>
+      <td>The color of the label stroke.
+      Only applicable when property <code>label</code> is defined.</td>
   </tr>
   <tr>
       <td class="greenField">inheritColor</td>
@@ -1173,6 +1189,23 @@ var options = {
       <td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
       the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
   </tr>
+  <tr>
+      <td class="greenField">labelAlignment</td>
+      <td>String</td>
+      <td>horizontal</td>
+      <td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge. 
+	  If <code>horizontal</code> it will align the label absolute horizontial.</td>
+  </tr>
+
+  <tr>
+   <td class="greenField">style</td>
+      <td>string</td>
+      <td>line</td>
+      <td>Define a line style for the edge.
+      Choose from <code>line</code> (default), <code>arrow</code>,
+      <code>arrow-center</code>, or <code>dash-line</code>.
+      </td>
+  </tr>
   <tr>
       <td class="greenField">width</td>
       <td>number</td>
@@ -1316,6 +1349,18 @@ var nodes = [
   <td>14</td>
   <td>Font size for the node in pixels.</td>
 </tr>
+<tr>
+  <td>fontStrokeWidth</td>
+  <td>Number</td>
+  <td>0</td>
+  <td>The width of the label stroke (border around label's text) in pixels.</td>
+</tr>
+<tr>
+  <td>fontStrokeColor</td>
+  <td>String</td>
+  <td>"white"</td>
+  <td>The color of the label stroke.</td>
+</tr>
 <tr>
   <td>shape</td>
   <td>String</td>

docs/timeline.html

@@ -1053,24 +1053,26 @@ timeline.off('select', onSelect);
 
     <tr>
     <td>rangechange</td>
-    <td>Fired repeatedly when the user is dragging the timeline window.
+    <td>Fired repeatedly when the timeline window is being changed.
     </td>
     <td>
       <ul>
         <li><code>start</code> (Number): timestamp of the current start of the window.</li>
         <li><code>end</code> (Number): timestamp of the current end of the window.</li>
+        <li><code>byUser</code> (Boolean): change happened because of user drag/zoom.</li>
       </ul>
     </td>
   </tr>
 
   <tr>
     <td>rangechanged</td>
-    <td>Fired once after the user has dragged the timeline window.
+    <td>Fired once after the timeline window has been changed.
     </td>
     <td>
       <ul>
         <li><code>start</code> (Number): timestamp of the current start of the window.</li>
         <li><code>end</code> (Number): timestamp of the current end of the window.</li>
+        <li><code>byUser</code> (Boolean): change happened because of user drag/zoom.</li>
       </ul>
     </td>
   </tr>

examples/network/09_sizing.html

@@ -22,8 +22,6 @@
     var edges = null;
     var network = null;
 
-    var DIR = 'img/soft-scraps-icons/';
-
     function draw() {
       // create people.
       // value corresponds with the age of the person

examples/network/34_circular_images.html

@@ -44,7 +44,8 @@
         {id: 11,  shape: 'circularImage', image: DIR + '11.png'},
         {id: 12,  shape: 'circularImage', image: DIR + '12.png'},
         {id: 13,  shape: 'circularImage', image: DIR + '13.png'},
-        {id: 14,  shape: 'circularImage', image: DIR + '14.png'}
+        {id: 14,  shape: 'circularImage', image: DIR + '14.png'},
+        {id: 15, label:"when images\nfail\nto load", shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png'}
       ];
 
       // create connetions between people
@@ -64,6 +65,7 @@
         {from: 11, to: 12},
         {from: 12, to: 13},
         {from: 13, to: 14},
+        {from: 14, to: 15}
       ];
 
       // create a network
@@ -74,15 +76,10 @@
       };
       var options = {
         nodes: {
-		  shape: 'circle',
           borderWidth:4,
 	      color: {
             border: '#222222',
-            background: '#ffffff',
-            highlight: {
-              border: '#428eff',
-              background: '#ffffff'
-            }
+            background: '#666666'
           },
           fontColor:'#eeeeee'
         },

examples/network/index.html

@@ -46,6 +46,9 @@
   <p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
   <p><a href="33_animation.html">33_animation.html</a></p>
   <p><a href="34_circular_images.html">34_circular_images.html</a></p>
+  <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
+  <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
+  <p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>