Tancre
/
ilinx
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '494ae5efbd'
${ noResults }
ilinx/main/scripts/d3-force-apex-plugin/docs/module-API.html

16717 lines
259 KiB
HTML
Raw Normal View History Unescape Escape

graphSith
5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>API - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Tutorials</li><li class="nav-item"><a href="tutorial-1-getting-started.html">Getting Started</a></li><li class="nav-item"><a href="tutorial-2-node-and-link-attributes.html">Node & Link Attributes</a></li><li class="nav-item"><a href="tutorial-3-included-sample-data.html">Included Sample Data</a></li><li class="nav-item"><a href="tutorial-4-example-queries.html">Example Queries</a></li><li class="nav-item"><a href="tutorial-5-special-use-cases.html">Special Use Cases</a></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-API.html">API</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.alignFixedNodesToGrid">alignFixedNodesToGrid</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.autoRefresh">autoRefresh</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.center">center</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.centerPositionGraph">centerPositionGraph</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.centerPositionViewport">centerPositionViewport</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.charge">charge</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.chargeDistance">chargeDistance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.colorScheme">colorScheme</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.customize">customize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.data">data</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.debug">debug</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.domParentWidth">domParentWidth</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.dragMode">dragMode</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.forceTimeLimit">forceTimeLimit</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.friction">friction</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.gravity">gravity</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.gridSize">gridSize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.height">height</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.inspect">inspect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-API.html#.keepAspectRatioOnResize">keepAspectRatioOnResize</a></span></li><li class="nav-item"><span class
</nav>
<div id="main">
<h1 class="page-title">API</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="description"><p>A module representing the public graph API.</p></div>
<div class="section-method">
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line46">line 46</a>
</li></ul></dd>
</dl>
</div>
</div>
<h3 class="subsection-title">Methods</h3>
<div class="section-method">
<h4 class="name" id=".alignFixedNodesToGrid"><span class="type-signature">(static) </span>alignFixedNodesToGrid<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, fixed nodes are aligned to the nearest grid position on the drag end event. You can pin nodes, when <code>pinMode</code> is set to true or by delivering nodes with the attribute “fixed” set to true and “x” and “y” attributes for the position. If you have already fixed nodes on your graph you can also set this attribute at runtime and resume the force. Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.alignFixedNodesToGrid(true).resume();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4578">line 4578</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.gridSize">module:API.gridSize</a></li>
<li><a href="module-API.html#.pinMode">module:API.pinMode</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".autoRefresh"><span class="type-signature">(static) </span>autoRefresh<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, the graph is refreshed automatically. This makes only sense when running as APEX plugin - here you have the SQL queries for loading new data with AJAX. If you run your code standalone, you have to provide new data as a parameter in the start or render method and therefore you have to use your own auto refresh logic. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.autoRefresh(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4767">line 4767</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.refreshInterval">module:API.refreshInterval</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".center"><span class="type-signature">(static) </span>center<span class="signature">(duration<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Helper/Command method - center the graph. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.center();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4340">line 4340</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
<li><a href="module-API.html#.zoomToFit">module:API.zoomToFit</a></li>
<li><a href="module-API.html#.zoomToFitOnForceEnd">module:API.zoomToFitOnForceEnd</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
500
</td>
<td class="description last">
<p>The transition duration in milliseconds.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".centerPositionGraph"><span class="type-signature">(static) </span>centerPositionGraph<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4>
<div class="description">
<p>Helper/Command method - get the center position of the graph border box:</p>
<pre class="prettyprint source"><code>example.centerPositionGraph();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4300">line 4300</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Array</code></span>
</dd>
</dl>
<div class="param-desc">
<p>An array with the x and y positions: [x, y].</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".centerPositionViewport"><span class="type-signature">(static) </span>centerPositionViewport<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4>
<div class="description">
<p>Helper/Command method - get the center position of the SVG viewport:</p>
<pre class="prettyprint source"><code>example.centerPositionViewport();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4314">line 4314</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Array</code></span>
</dd>
</dl>
<div class="param-desc">
<p>An array with the x and y positions: [x, y].</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".charge"><span class="type-signature">(static) </span>charge<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the charge strength to the specified value. For more informations have a look at the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#charge">D3 API Reference</a>. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.charge(-200).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5021">line 5021</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.chargeDistance">module:API.chargeDistance</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
-350
</td>
<td class="description last">
<p>The new charge value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current charge value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".chargeDistance"><span class="type-signature">(static) </span>chargeDistance<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the maximum distance over which charge forces are applied. For more informations have a look at the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#chargeDistance">D3 API Reference</a>. This option is not shown in the customize wizard. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.chargeDistance(200).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5041">line 5041</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.charge">module:API.charge</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
Infinity
</td>
<td class="description last">
<p>The new charge distance value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current charge distance value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".colorScheme"><span class="type-signature">(static) </span>colorScheme<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {string|Object}</span></h4>
<div class="description">
<p>Color scheme can be <code>color20</code>, <code>color20b</code>, <code>color20c</code>, <code>color10</code> or <code>direct</code>. The first four use the color functions provided by D3, which return up to 20 colors for the given keywords for your data attribute COLORVALUE - this can be a text like a department name or a postal zip code. With the last option you can provide direct css color values in your data like blue or #123456. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.colorScheme('color10');</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3756">line 3756</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
color20
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".customize"><span class="type-signature">(static) </span>customize<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>Gets or sets the customize mode. If true, the customizing wizard is opened, otherwise closed.</p>
<pre class="prettyprint source"><code>example.customize(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5701">line 5701</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.debug">module:API.debug</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new mode.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current mode if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".data"><span class="type-signature">(static) </span>data<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Returns the current graph data as JSON object. This method expects no parameter and terminates the method chain. Example:</p>
<pre class="prettyprint source"><code>//JSON object
example.data();
//stringified JSON object
JSON.stringify(example.data());</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5597">line 5597</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.nodeDataById">module:API.nodeDataById</a></li>
<li><a href="module-API.html#.start">module:API.start</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current graph data.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".debug"><span class="type-signature">(static) </span>debug<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>Gets or sets the debug mode. When debug is enabled, there is a link rendered in the SVG to start the customize wizard and debug messages are written to the console.</p>
<pre class="prettyprint source"><code>example.debug(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5728">line 5728</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.customize">module:API.customize</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new mode.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current mode if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".domParentWidth"><span class="type-signature">(static) </span>domParentWidth<span class="signature">()</span><span class="type-signature"> &rarr; {number}</span></h4>
<div class="description">
<p>Returns the current with of the graphs DOM parent. This method expects no parameter and terminates the method chain.</p>
<p>If the option useDomParentWidth is set to true, then this is the effective width of the graph - independent of the configured width.</p>
<pre class="prettyprint source"><code>example.domParentWidth();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4872">line 4872</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current DOM parent width.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".dragMode"><span class="type-signature">(static) </span>dragMode<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, the nodes are draggable. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.dragMode(false);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4000">line 4000</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.pinMode">module:API.pinMode</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".forceTimeLimit"><span class="type-signature">(static) </span>forceTimeLimit<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the maximum runtime in milliseconds for the force. This could be helpful when the graph is running to long with many node background images or when you want to stop the force early because all nodes are fixed and the running force is useless and costs only battery runtime.</p>
<pre class="prettyprint source"><code>example.forceTimeLimit(100);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5137">line 5137</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.charge">module:API.charge</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
Infinity
</td>
<td class="description last">
<p>The new force time limit value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current force time limit value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".friction"><span class="type-signature">(static) </span>friction<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the friction coefficient to the specified value. For more informations have a look at the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#friction">D3 API Reference</a>. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.friction(0.4).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5098">line 5098</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0.9
</td>
<td class="description last">
<p>The new friction value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current friction value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".gravity"><span class="type-signature">(static) </span>gravity<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the gravitational strength to the specified numerical value. For more informations see the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#gravity">D3 API Reference</a>. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.gravity(0.3).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5060">line 5060</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0.1
</td>
<td class="description last">
<p>The new gravity value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current gravity value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".gridSize"><span class="type-signature">(static) </span>gridSize<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The grid size of the virtual grid for the option <code>alignFixedNodesToGrid</code>. Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.gridSize(100).alignFixedNodesToGrid(true).resume();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4619">line 4619</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.alignFixedNodesToGrid">module:API.alignFixedNodesToGrid</a></li>
<li><a href="module-API.html#.pinMode">module:API.pinMode</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
50
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".height"><span class="type-signature">(static) </span>height<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The height of the chart:</p>
<pre class="prettyprint source"><code>example.height(300);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4907">line 4907</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.width">module:API.width</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
400
</td>
<td class="description last">
<p>The new chart height value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current chart height value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".inspect"><span class="type-signature">(static) </span>inspect<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Shows the current closure object, which holds all functions and data. This method expects no parameter and terminates the method chain:</p>
<pre class="prettyprint source"><code>example.inspect();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5761">line 5761</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.userAgent">module:API.userAgent</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph's internal object with all functions and data.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".keepAspectRatioOnResize"><span class="type-signature">(static) </span>keepAspectRatioOnResize<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>When the graph is resized, the initial aspect ratio (width and height on first render cycle) is respected:</p>
<pre class="prettyprint source"><code>//change config and resize height (width will change implicit based on initial aspect ratio)
example.keepAspectRatioOnResize(true).height(400);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4465">line 4465</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.width">module:API.width</a></li>
<li><a href="module-API.html#.height">module:API.height</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".labelDistance"><span class="type-signature">(static) </span>labelDistance<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The distance of a label from the nodes outer border. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.labelDistance(18).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3943">line 3943</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.labelsCircular">module:API.labelsCircular</a></li>
<li><a href="module-API.html#.wrapLabels">module:API.wrapLabels</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
12
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".labelPlacementIterations"><span class="type-signature">(static) </span>labelPlacementIterations<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The number of iterations for the preventLabelOverlappingOnForceEnd option - default is 250 - as higher the number, as higher the quality of the result. For details refer to the <a href="https://github.com/tinker10/D3-Labeler">description of the simulated annealing function of the author Evan Wang</a>. Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.preventLabelOverlappingOnForceEnd(true).resume();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3981">line 3981</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.labelPlacementIterations">module:API.labelPlacementIterations</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
250
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".labelsCircular"><span class="type-signature">(static) </span>labelsCircular<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, then the labels are rendered along a path around the nodes.</p>
<p>You can overwrite this attribute on node level by setting a attribute called LABELCIRCULAR on the node to true or false. As an example you can see this in the online demo on the node named KING.</p>
<p>ATTENTION: If you set the LABELCIRCULAR attribute on a specific or all nodes, then the global configuration parameter labelsCircular has no effect on these nodes.</p>
<p>Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.labelsCircular(true).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3923">line 3923</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLabels">module:API.showLabels</a></li>
<li><a href="module-API.html#.labelDistance">module:API.labelDistance</a></li>
<li><a href="module-API.html#.wrapLabels">module:API.wrapLabels</a></li>
<li><a href="module-API.html#.labelSplitCharacter">module:API.labelSplitCharacter</a></li>
<li><a href="module-API.html#.wrappedLabelWidth">module:API.wrappedLabelWidth</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".labelSplitCharacter"><span class="type-signature">(static) </span>labelSplitCharacter<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {string|Object}</span></h4>
<div class="description">
<p>If set to a value other then <code>none</code> labels are splitted on this character. Needs <code>wrapLabels</code> to be true and a <code>render</code> call to take into effect. If both options <code>labelSplitCharacter</code> and <code>wrappedLabelWidth</code> are set, then <code>wrappedLabelWidth</code> is ignored.</p>
<pre class="prettyprint source"><code>example.wrapLabels(true).labelSplitCharacter(&quot;^&quot;).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3836">line 3836</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLabels">module:API.showLabels</a></li>
<li><a href="module-API.html#.wrappedLabelWidth">module:API.wrappedLabelWidth</a></li>
<li><a href="module-API.html#.wrappedLabelLineHeight">module:API.wrappedLabelLineHeight</a></li>
<li><a href="module-API.html#.labelsCircular">module:API.labelsCircular</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
"none"
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".lassoMode"><span class="type-signature">(static) </span>lassoMode<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, you can select miltiple nodes with a lasso - think of a graphical multiselect :-). No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.lassoMode(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4053">line 4053</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".linkDistance"><span class="type-signature">(static) </span>linkDistance<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The distance between nodes centers. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.linkDistance(60).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5001">line 5001</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.selfLinkDistance">module:API.selfLinkDistance</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
80
</td>
<td class="description last">
<p>The new link distance value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current link distance value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".links"><span class="type-signature">(static) </span>links<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4>
<div class="description">
<p>Returns the current graph links as D3 array for direct modifications. This method expects no parameter and terminates the method chain. See also the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#operating-on-selections">D3 docs</a>. Example:</p>
<pre class="prettyprint source"><code>example.links().filter(function (link) {
return link.TOID === &quot;7839&quot;;
}).style(&quot;stroke&quot;, &quot;red&quot;);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5569">line 5569</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.nodes">module:API.nodes</a></li>
<li><a href="module-API.html#.selfLinks">module:API.selfLinks</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Array</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current graph links.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".linkStrength"><span class="type-signature">(static) </span>linkStrength<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the strength (rigidity) of links to the specified value in the range [0,1]. For more informations see the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#linkStrength">D3 API Reference</a>. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.linkStrength(0.1).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5079">line 5079</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1
</td>
<td class="description last">
<p>The new link strength value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current link strength value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".maxNodeRadius"><span class="type-signature">(static) </span>maxNodeRadius<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The maximum node radius. Each node radius is calculated by its SIZEVALUE attribute in a range between the minimum and the maximum node radius. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.maxNodeRadius(24).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4956">line 4956</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.minNodeRadius">module:API.minNodeRadius</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
18
</td>
<td class="description last">
<p>The new max node radius value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current max node radius value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".maxZoomFactor"><span class="type-signature">(static) </span>maxZoomFactor<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>No <code>render</code> or <code>resume</code> call needed to take into effect::</p>
<pre class="prettyprint source"><code>example.maxZoomFactor(10);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4193">line 4193</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
5
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".minNodeRadius"><span class="type-signature">(static) </span>minNodeRadius<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The minimum node radius. Each node radius is calculated by its SIZEVALUE attribute in a range between the minimum and the maximum node radius. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.minNodeRadius(2).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4930">line 4930</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.maxNodeRadius">module:API.maxNodeRadius</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
6
</td>
<td class="description last">
<p>The new min node radius value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current min node radius value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".minZoomFactor"><span class="type-signature">(static) </span>minZoomFactor<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>No <code>render</code> or <code>resume</code> call needed to take into effect::</p>
<pre class="prettyprint source"><code>example.minZoomFactor(0.1);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4174">line 4174</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0.2
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".moveFixedNodes"><span class="type-signature">(static) </span>moveFixedNodes<span class="signature">(x<span class="signature-attributes">opt</span>, y<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Command method (has no get or set function). Moves all fixed nodes in the provided direction. Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.moveFixedNodes(10,-5).resume();</code></pre><p>The example adds 10 to x position and -5 to y position to all fixed nodes. ATTENTION: If alignFixedNodesToGrid is set to true this can have unexpected behavior - you must then provide values greater then gridSize halved to see any changes on your graph, otherwise the positions are falling back to the nearest (current) grid position.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4642">line 4642</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.pinMode">module:API.pinMode</a></li>
<li><a href="module-API.html#.alignFixedNodesToGrid">module:API.alignFixedNodesToGrid</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">
<p>x value - positive or negative</p>
</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">
<p>y value - positive or negative</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".nodeDataById"><span class="type-signature">(static) </span>nodeDataById<span class="signature">(id)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Returns the data from a specific node as JSON object. This method expects a node ID as parameter and terminates the method chain. Example:</p>
<pre class="prettyprint source"><code>//get the data from the node with the ID 8888
example.nodeDataById('8888');
//get the data from the node with the ID 'myAlphanumericID'
example.nodeDataById('myAlphanumericID');</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5613">line 5613</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.data">module:API.data</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
<p>The node id.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The node data.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".nodeEventToOpenLink"><span class="type-signature">(static) </span>nodeEventToOpenLink<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {string|Object}</span></h4>
<div class="description">
<p>Can be “none”, “click”, “dblclick” or “contextmenu”. Works only for nodes with a non empty LINK attribute. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.nodeEventToOpenLink(&quot;click&quot;);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4725">line 4725</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
"dblclick"
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".nodeEventToStopPinMode"><span class="type-signature">(static) </span>nodeEventToStopPinMode<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>Can be “none”, “click”, “dblclick” and “contextmenu” and defines, which event will release a node. This releasing of a node is sometimes a bit unstable (not on the code side, but on the visualizing side) and depends on the next tick event. You have to play around with this. If you want only release all nodes you can simply call the releaseFixedNodes method and resume the graph. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.nodeEventToStopPinMode(&quot;contextmenu&quot;);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4689">line 4689</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.releaseFixedNodes">module:API.releaseFixedNodes</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
"contextmenu"
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".nodeLinkTarget"><span class="type-signature">(static) </span>nodeLinkTarget<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {string|Object}</span></h4>
<div class="description">
<p>This text is used as the link target, when a node has a LINK attribute.</p>
<p>There are three special keywords: “none”, “nodeID” and “domContainerID”. If you use “none”, the link is opened in the same window/tab where your graph is currently shown. If you use “nodeID”, the ID of the currently clicked node is used as the target attribute, this means - you get one window/tab for each node in your graph - when you click a second time on the same node, the window/tab is reused. The same with the keyword “domContainerID” - you get one window/tab for each graph on your page - when you click a second time on the same node, the window/tab is reused.</p>
<p>Anything else is not interpreted - your given text is simply used as the target attribute of the link. This is also the case for the second option in the customize wizard called “_blank”. If you use this, then each click on a node opens in a new window/tab. You are not restricted to use only the predefined select options. It is up to you to overwrite the value in your configuration object. As an example: If you want to have always the same window/tab for each click on a node, then simply provide a text here, that fit your needs e.g. “myOwnWindowName”.</p>
<pre class="prettyprint source"><code>example.nodeLinkTarget(&quot;myOwnWindowName&quot;);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4748">line 4748</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.nodeEventToOpenLink">module:API.nodeEventToOpenLink</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
"_blank"
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".nodes"><span class="type-signature">(static) </span>nodes<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4>
<div class="description">
<p>Returns the current graph nodes as D3 array for direct modifications. This method expects no parameter and terminates the method chain. See also the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#operating-on-selections">D3 docs</a>. Example:</p>
<pre class="prettyprint source"><code>example.nodes().filter(function (node) {
return node.ID === &quot;7839&quot;;
}).style(&quot;fill&quot;, &quot;blue&quot;);
example.nodes().filter(function (node) {
return node.ID === &quot;7839&quot;;
}).classed(&quot;myOwnClass&quot;, true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5555">line 5555</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.links">module:API.links</a></li>
<li><a href="module-API.html#.selfLinks">module:API.selfLinks</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Array</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current graph nodes.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onForceEndFunction"><span class="type-signature">(static) </span>onForceEndFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the forceend event.</p>
<p>No data is provided because this is a very generic event:</p>
<pre class="prettyprint source"><code>example.onForceEndFunction(
function(){
// your logic here.
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Force End [D3 - Force Layout]” on your graph region.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5513">line 5513</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.onForceStartFunction">module:API.onForceStartFunction</a></li>
<li><a href="module-API.html#.onRenderEndFunction">module:API.onRenderEndFunction</a></li>
<li><a href="module-API.html#.nodes">module:API.nodes</a></li>
<li><a href="module-API.html#.links">module:API.links</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onForceStartFunction"><span class="type-signature">(static) </span>onForceStartFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the forcestart event.</p>
<p>No data is provided because this is a very generic event:</p>
<pre class="prettyprint source"><code>example.onForceStartFunction(
function(){
// your logic here.
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Force Start [D3 - Force Layout]” on your graph region.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5486">line 5486</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.onForceEndFunction">module:API.onForceEndFunction</a></li>
<li><a href="module-API.html#.onRenderEndFunction">module:API.onRenderEndFunction</a></li>
<li><a href="module-API.html#.nodes">module:API.nodes</a></li>
<li><a href="module-API.html#.links">module:API.links</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onLassoEndFunction"><span class="type-signature">(static) </span>onLassoEndFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the lassoend event.</p>
<p>In the first two parameters you get the event and the d3 lasso data, inside your function you have access to the DOM node with the this keyword. In case of the lasso this is refering the svg container element, because the lasso itself is not interesting:</p>
<pre class="prettyprint source"><code>example.onLassoEndFunction(
function(event, data){
console.log(&quot;Lasso end - event:&quot;, event);
console.log(&quot;Lasso end - data:&quot;, data);
console.log(&quot;Lasso end - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Lasso End [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Lasso end - event:&quot;, this.browserEvent);
console.log(&quot;Lasso end - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5429">line 5429</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onLassoStartFunction"><span class="type-signature">(static) </span>onLassoStartFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the lassostart event.</p>
<p>In the first two parameters you get the event and the d3 lasso data, inside your function you have access to the DOM node with the this keyword. In case of the lasso this is refering the svg container element, because the lasso itself is not interesting:</p>
<pre class="prettyprint source"><code>example.onLassoStartFunction(
function(event, data){
console.log(&quot;Lasso start - event:&quot;, event);
console.log(&quot;Lasso start - data:&quot;, data);
console.log(&quot;Lasso start - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Lasso Start [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Lasso start - event:&quot;, this.browserEvent);
console.log(&quot;Lasso start - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5399">line 5399</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onLinkClickFunction"><span class="type-signature">(static) </span>onLinkClickFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the link click event.</p>
<p>In the first two parameters you get the event and the d3 node data, inside your function you have access to the DOM node with the this keyword:</p>
<pre class="prettyprint source"><code>example.onLinkClickFunction(
function(event, data){
console.log(&quot;Link click - event:&quot;, event);
console.log(&quot;Link click - data:&quot;, data);
console.log(&quot;Link click - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Link Click [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Link click - event:&quot;, this.browserEvent);
console.log(&quot;Link click - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
<p>Attention: It is not so easy to click a link, because the links are so narrow - if this option is needed I recommend to switch on the zoom mode - with zoom and pan it feels more natural to click links.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5219">line 5219</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onNodeClickFunction"><span class="type-signature">(static) </span>onNodeClickFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the node click event.</p>
<p>In the first two parameters you get the event and the d3 node data, inside your function you have access to the DOM node with the this keyword:</p>
<pre class="prettyprint source"><code>example.onNodeClickFunction(
function(event, data){
console.log(&quot;Node click - event:&quot;, event);
console.log(&quot;Node click - data:&quot;, data);
console.log(&quot;Node click - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Node Click [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Node click - event:&quot;, this.browserEvent);
console.log(&quot;Node click - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5309">line 5309</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onNodeContextmenuFunction"><span class="type-signature">(static) </span>onNodeContextmenuFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the node contextmenu event.</p>
<p>In the first two parameters you get the event and the d3 node data, inside your function you have access to the DOM node with the this keyword:</p>
<pre class="prettyprint source"><code>example.onNodeContextmenuFunction(
function(event, data){
console.log(&quot;Node contextmenu - event:&quot;, event);
console.log(&quot;Node contextmenu - data:&quot;, data);
console.log(&quot;Node contextmenu - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Node Contextmenu [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Node contextmenu - event:&quot;, this.browserEvent);
console.log(&quot;Node contextmenu - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5369">line 5369</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onNodeContextmenuPreventDefault"><span class="type-signature">(static) </span>onNodeContextmenuPreventDefault<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, the context menu default browser action on the nodes are prevented. This could be useful, if you want to implement an own context menu for the nodes. xxx:</p>
<pre class="prettyprint source"><code>example.onNodeContextmenuPreventDefault(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4707">line 4707</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onNodeDblclickFunction"><span class="type-signature">(static) </span>onNodeDblclickFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the node dblclick event.</p>
<p>In the first two parameters you get the event and the d3 node data, inside your function you have access to the DOM node with the this keyword:</p>
<pre class="prettyprint source"><code>example.onNodeDblclickFunction(
function(event, data){
console.log(&quot;Node double click - event:&quot;, event);
console.log(&quot;Node double click - data:&quot;, data);
console.log(&quot;Node double click - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Node Double Click [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Node double click - event:&quot;, this.browserEvent);
console.log(&quot;Node double click - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5339">line 5339</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onNodeMouseenterFunction"><span class="type-signature">(static) </span>onNodeMouseenterFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the node mouseenter event.</p>
<p>In the first two parameters you get the event and the d3 node data, inside your function you have access to the DOM node with the this keyword:</p>
<pre class="prettyprint source"><code>example.onNodeMouseenterFunction(
function(event, data){
console.log(&quot;Node mouse enter - event:&quot;, event);
console.log(&quot;Node mouse enter - data:&quot;, data);
console.log(&quot;Node mouse enter - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Node Mouse Enter [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Node mouse enter - event:&quot;, this.browserEvent);
console.log(&quot;Node mouse enter - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5249">line 5249</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onNodeMouseleaveFunction"><span class="type-signature">(static) </span>onNodeMouseleaveFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the node mouseleave event.</p>
<p>In the first two parameters you get the event and the d3 node data, inside your function you have access to the DOM node with the this keyword:</p>
<pre class="prettyprint source"><code>example.onNodeMouseleaveFunction(
function(event, data){
console.log(&quot;Node mouse leave - event:&quot;, event);
console.log(&quot;Node mouse leave - data:&quot;, data);
console.log(&quot;Node mouse leave - this:&quot;, this);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Node Mouse Leave [D3 - Force Layout]” on your graph region. If you do so, you can access the event and data by executing JavaScript code in this way:</p>
<pre class="prettyprint source"><code>console.log(&quot;Node mouse leave - event:&quot;, this.browserEvent);
console.log(&quot;Node mouse leave - data:&quot;, this.data);</code></pre><p>Please refer also to the APEX dynamic action documentation and keep in mind, that the data is the same in both ways but the event differs, because APEX provide a jQuery event and the Plugin the D3 original event.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5279">line 5279</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onRenderEndFunction"><span class="type-signature">(static) </span>onRenderEndFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the renderend event.</p>
<p>No data is provided because this is a very generic event. You can use the <code>nodes</code> and <code>links</code> API methods for a D3 array to modify directly the nodes or links:</p>
<pre class="prettyprint source"><code>example.onRenderEndFunction(
function(){
example.nodes().filter(function (node) {
return node.ID === &quot;7839&quot;;
}).style(&quot;fill&quot;, &quot;blue&quot;);
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Render End [D3 - Force Layout]” on your graph region.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5459">line 5459</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.onForceStartFunction">module:API.onForceStartFunction</a></li>
<li><a href="module-API.html#.onForceEndFunction">module:API.onForceEndFunction</a></li>
<li><a href="module-API.html#.nodes">module:API.nodes</a></li>
<li><a href="module-API.html#.links">module:API.links</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onResizeFunction"><span class="type-signature">(static) </span>onResizeFunction<span class="signature">(eventFunction<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the function for the resize event.</p>
<p>No data is provided because this is a very generic event:</p>
<pre class="prettyprint source"><code>example.onResizeFunction(
function(){
// your logic here
}
);</code></pre><p>If used as APEX plugin you can also create an APEX dynamic action on the component event “Resize [D3 - Force Layout]” on your graph region.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4497">line 4497</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.onResizeFunctionTimeout">module:API.onResizeFunctionTimeout</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventFunction</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new function.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current function if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".onResizeFunctionTimeout"><span class="type-signature">(static) </span>onResizeFunctionTimeout<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The harmonized/delayed handling of the resize event to prevent performance issues - see also <code>zoomToFitOnResize</code>:</p>
<pre class="prettyprint source"><code>example.onResizeFunctionTimeout(100).height(400);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4521">line 4521</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.onResizeFunction">module:API.onResizeFunction</a></li>
<li><a href="module-API.html#.zoomToFitOnResize">module:API.zoomToFitOnResize</a></li>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
<li><a href="module-API.html#.zoomToFit">module:API.zoomToFit</a></li>
<li><a href="module-API.html#.zoomToFitOnForceEnd">module:API.zoomToFitOnForceEnd</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
300
</td>
<td class="description last">
<p>The new chart width value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current chart width value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".options"><span class="type-signature">(static) </span>options<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Get or set the whole configuration with one call. Ouput includes all options, which are accessible via the API methods including the registered event functions:</p>
<pre class="prettyprint source"><code>//get the current configuration
example.options();
//set the new configuration
example.options( { pinMode: true, ... } );</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5628">line 5628</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.optionsCustomizationWizard">module:API.optionsCustomizationWizard</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>Your new options.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>Your current options or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".optionsCustomizationWizard"><span class="type-signature">(static) </span>optionsCustomizationWizard<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Get or set the whole configuration with one call. Output includes only the options, which are accessible via the customization wizard:</p>
<pre class="prettyprint source"><code>//get the current configuration
example.optionsCustomizationWizard();
//set the new configuration
example.optionsCustomizationWizard( { pinMode: true, ... } );</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5669">line 5669</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.options">module:API.options</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>Your new options.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>Your current options or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".pinMode"><span class="type-signature">(static) </span>pinMode<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, the nodes are fixed (pinned) at the end of a drag event. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.pinMode(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4027">line 4027</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.releaseFixedNodes">module:API.releaseFixedNodes</a></li>
<li><a href="module-API.html#.dragMode">module:API.dragMode</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".positions"><span class="type-signature">(static) </span>positions<span class="signature">(positionsArray<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the current positions of all nodes. This lets you save and load a specific layout or modify the current positions (of fixed nodes - if you have no fixed nodes then the nodes will likely fall back to their previous positions because of the working forces). Works nice together with the <code>pinMode</code>. Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>// get current positions: Array of objects like [{&quot;ID&quot;:&quot;7839&quot;,&quot;x&quot;:200,&quot;y&quot;:100,&quot;fixed&quot;:1},...])
var pos = example.positions();
// set positions
example.positions(pos.map(function(p){ p.x += 10; return p; })).resume();
// all in one ;-)
example.positions( example.positions().map(function(p){ p.x += 10; return p; }) ).resume();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5162">line 5162</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.pinMode">module:API.pinMode</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>positionsArray</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new positions array.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current positions array if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".preventLabelOverlappingOnForceEnd"><span class="type-signature">(static) </span>preventLabelOverlappingOnForceEnd<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If set to true the labels are aligned with a simulated annealing function to prevent overlapping when the graph is cooled down (correctly on the force end event and only on labels, who are not circular). Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.preventLabelOverlappingOnForceEnd(true).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3962">line 3962</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.labelPlacementIterations">module:API.labelPlacementIterations</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".refreshInterval"><span class="type-signature">(static) </span>refreshInterval<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The refresh interval in milliseconds. No <code>render</code> or <code>resume</code> call needed to take into effect, but after changing the interval value you have to stop a current activated auto refresh and start it again to take the new value into effect:</p>
<pre class="prettyprint source"><code>// only set the value and start auto refresh
example.refreshInterval(4000).autoRefresh(true);
// restart running auto refresh
example.refreshInterval(2000).autoRefresh(false).autoRefresh(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4800">line 4800</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.autoRefresh">module:API.autoRefresh</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
5000
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".releaseFixedNodes"><span class="type-signature">(static) </span>releaseFixedNodes<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Command method (has no get or set function and expects no parameter): Release all fixed (pinned) nodes. Needs a <code>resume</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.releaseFixedNodes().resume();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4672">line 4672</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.pinMode">module:API.pinMode</a></li>
<li><a href="module-API.html#.alignFixedNodesToGrid">module:API.alignFixedNodesToGrid</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".render"><span class="type-signature">(static) </span>render<span class="signature">(data<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>The <code>render</code> method does the same as the <code>start</code> method - the only difference is, that the <code>render</code> method does not try to load data, if you use the APEX plugin. You can use this method after changing options which need a <code>render</code> cycle to take the changes into effect:</p>
<pre class="prettyprint source"><code>example.minNodeRadius(4).maxNodeRadius(20).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3039">line 3039</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.start">module:API.start</a></li>
<li><a href="module-API.html#.resume">module:API.resume</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
Sample data EMP table flavoured
</td>
<td class="description last">
<p>Can be a XML string, JSON string or JavaScript object (JSON)</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".resume"><span class="type-signature">(static) </span>resume<span class="signature">()</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>The <code>resume</code> method restarts only the force on your graph without a <code>render</code> cycle. This saves CPU time and can be useful if you change only things in your graph which do not need rendering to taking into effect:</p>
<pre class="prettyprint source"><code>example.releaseFixedNodes().resume();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3626">line 3626</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.start">module:API.start</a></li>
<li><a href="module-API.html#.render">module:API.render</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".sampleData"><span class="type-signature">(static) </span>sampleData<span class="signature">(data<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Gets or sets the sample data. This makes only sense before the first start, because only on the first start without data available the sample data is used. After the first start you can provide new data with the start method. Example:</p>
<pre class="prettyprint source"><code>//first start
example.sampleData('&lt;node>...').start();
//later
example.start('&lt;node>...');</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5533">line 5533</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.start">module:API.start</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The new sample data as XML string, JSON string or JSON object.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current sample data in JSON format if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".selfLinkDistance"><span class="type-signature">(static) </span>selfLinkDistance<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The distance of the self link path around a node. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.selfLinkDistance(25).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4982">line 4982</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.linkDistance">module:API.linkDistance</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
20
</td>
<td class="description last">
<p>The new self link distance value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current self link distance value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".selfLinks"><span class="type-signature">(static) </span>selfLinks<span class="signature">()</span><span class="type-signature"> &rarr; {Array}</span></h4>
<div class="description">
<p>Returns the current graph selfLinks as D3 array for direct modifications. This method expects no parameter and terminates the method chain. See also the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#operating-on-selections">D3 docs</a>. Example:</p>
<pre class="prettyprint source"><code>example.selfLinks().style(&quot;stroke&quot;, &quot;green&quot;);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5581">line 5581</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.nodes">module:API.nodes</a></li>
<li><a href="module-API.html#.links">module:API.links</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Array</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current graph links.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".setDomParentPaddingToZero"><span class="type-signature">(static) </span>setDomParentPaddingToZero<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, the parent DOM element of the graph gets the style { padding: 0px; }. If set to false, this style is removed from the DOM parent of the graph. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.setDomParentPaddingToZero(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4848">line 4848</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.useDomParentWidth">module:API.useDomParentWidth</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showBorder"><span class="type-signature">(static) </span>showBorder<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, a class named border is added to the SVG element, if false the class will be removed. The border itself is defined in the delivered CSS - you can overwrite it if the current style does not match your needs. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.showBorder(false);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3641">line 3641</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showLabels"><span class="type-signature">(static) </span>showLabels<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true and you provided in your node data an attribute LABEL, then a label is rendered on top of the node. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.showLabels(false).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3787">line 3787</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.wrapLabels">module:API.wrapLabels</a></li>
<li><a href="module-API.html#.wrappedLabelWidth">module:API.wrappedLabelWidth</a></li>
<li><a href="module-API.html#.wrappedLabelLineHeight">module:API.wrappedLabelLineHeight</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showLegend"><span class="type-signature">(static) </span>showLegend<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, a legend for all COLORVALUEs in the node data is rendered in the bottom left corner of the graph. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.showLegend(false);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3660">line 3660</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showLinkDirection"><span class="type-signature">(static) </span>showLinkDirection<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, you get an marker at the end of a link. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.showLinkDirection(false).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3702">line 3702</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showLoadingIndicator"><span class="type-signature">(static) </span>showLoadingIndicator<span class="signature">(value)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>Helper method to directly show or hide a loading indicator. The APEX plugin do this implicitly on AJAX calls when the option <code>showLoadingIndicatorOnAjaxCall</code> is set to true. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>// Show:
example.showLoadingIndicator(true);
// Hide:
example.showLoadingIndicator(false);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4560">line 4560</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLoadingIndicatorOnAjaxCall">module:API.showLoadingIndicatorOnAjaxCall</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showLoadingIndicatorOnAjaxCall"><span class="type-signature">(static) </span>showLoadingIndicatorOnAjaxCall<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, a loading indicator is shown when used as a APEX plugin during the AJAX calls. If you want to show the loading indicator in a standalone implementation you can show and hide the loading indicator directly with the API method <code>showLoadingIndicator</code>:</p>
<pre class="prettyprint source"><code>example.showLoadingIndicatorOnAjaxCall(false);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4540">line 4540</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLoadingIndicator">module:API.showLoadingIndicator</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showSelfLinks"><span class="type-signature">(static) </span>showSelfLinks<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, then links with the same source and target are rendered along a path around the node bottom. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.showSelfLinks(false).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3684">line 3684</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".showTooltips"><span class="type-signature">(static) </span>showTooltips<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true and you provided in your source data an attribute INFOSTRING, then a tooltip is shown by hovering a node. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.showTooltips(false);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3720">line 3720</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".start"><span class="type-signature">(static) </span>start<span class="signature">(data<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>This method starts the graph. You can configure your graph with all the available methods, but without the <code>start</code> method your changes will NOT take into effect.</p>
<p>You can pass new data (see included-sample-data) to the <code>start</code> method. Data can be a XML string, JSON string or JavaScript object (JSON). If you use the APEX plugin, then the <code>start</code> method internally does the AJAX call to your Oracle database, but you can prevent this behavior by passing data to this method.</p>
<p>This also means, that you can use data from a textarea or a report for the APEX plugin, to overwrite the existing data and you do not need to configure any query to run this plugin. If you do so and you do not pass data to the <code>start</code> method on the very first call, then the plugin provides sample data - it is the same data with the <a href="https://apex.oracle.com/pls/apex/f?p=18290:1">APEX online demo</a> of this plugin, there is no query configured and you get therefore the sampledata :-)</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line2947">line 2947</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.render">module:API.render</a></li>
<li><a href="module-API.html#.resume">module:API.resume</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
Sample data EMP table flavoured
</td>
<td class="description last">
<p>Can be a XML string, JSON string or JavaScript object (JSON)</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".theta"><span class="type-signature">(static) </span>theta<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>Gets or sets the Barnes–Hut approximation criterion to the specified value. For more informations see the <a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Force-Layout.md#theta">D3 API Reference</a>. On smaller graphs with not so many nodes you will likely see no difference when you change this value. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.theta(0.1).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5117">line 5117</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0.8
</td>
<td class="description last">
<p>The new theta value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current theta value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".tooltipPosition"><span class="type-signature">(static) </span>tooltipPosition<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {string|Object}</span></h4>
<div class="description">
<p>The position where tooltips are shown in the graph - can be <code>node</code>, <code>svgTopLeft</code> or <code>svgTopRight</code>. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.tooltipPosition('node');</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3738">line 3738</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
svgTopRight
</td>
<td class="description last">
<ul>
<li>The new config value.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".transform"><span class="type-signature">(static) </span>transform<span class="signature">(transform<span class="signature-attributes">opt</span>, duration<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Behaves like a normal getter/setter (the <code>zoom</code> and <code>zoomSmooth</code> methods implements only setters) and can be used in the conf object to initialize the graph with different translate values/scale factors than [0,0]/1. The current transform value(an object) is rendered in the customization wizard conf object text area like all other options when the current value is different then the default value. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>//example.zoomMode(true);
example.transform({&quot;translate&quot;:[100,100],&quot;scale&quot;:0.5});</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4278">line 4278</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.zoom">module:API.zoom</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>transform</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
{“translate”:[0,0],“scale”:1}
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
500
</td>
<td class="description last">
<p>The transition duration in milliseconds.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".useDomParentWidth"><span class="type-signature">(static) </span>useDomParentWidth<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, the width of the chart(SVG element) is aligned to its DOM parent element. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.useDomParentWidth(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4819">line 4819</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.setDomParentPaddingToZero">module:API.setDomParentPaddingToZero</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".userAgent"><span class="type-signature">(static) </span>userAgent<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>
<div class="description">
<p>Returns the detected user agent. Expects no parameter and terminates the method chain:</p>
<pre class="prettyprint source"><code>example.userAgent();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5750">line 5750</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.inspect">module:API.inspect</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The detected user agent.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".version"><span class="type-signature">(static) </span>version<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>
<div class="description">
<p>Shows the current plugin version. This method expects no parameter and terminates the method chain:</p>
<pre class="prettyprint source"><code>example.version();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line5772">line 5772</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.userAgent">module:API.userAgent</a></li>
</ul>
</dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The plugin version.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".width"><span class="type-signature">(static) </span>width<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The width of the chart:</p>
<pre class="prettyprint source"><code>example.width(800);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4884">line 4884</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.height">module:API.height</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
600
</td>
<td class="description last">
<p>The new chart width value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current chart width value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".wrapLabels"><span class="type-signature">(static) </span>wrapLabels<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true long labels are wrapped. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.wrapLabels(true).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3810">line 3810</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLabels">module:API.showLabels</a></li>
<li><a href="module-API.html#.labelSplitCharacter">module:API.labelSplitCharacter</a></li>
<li><a href="module-API.html#.wrappedLabelWidth">module:API.wrappedLabelWidth</a></li>
<li><a href="module-API.html#.wrappedLabelLineHeight">module:API.wrappedLabelLineHeight</a></li>
<li><a href="module-API.html#.labelsCircular">module:API.labelsCircular</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".wrappedLabelLineHeight"><span class="type-signature">(static) </span>wrappedLabelLineHeight<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The line height of labels in <code>em</code>, if option <code>wrapLabels</code> is set to true. Needs a <code>render</code> call to take into effect:</p>
<pre class="prettyprint source"><code>example.wrappedLabelLineHeight(1.5).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3890">line 3890</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLabels">module:API.showLabels</a></li>
<li><a href="module-API.html#.wrapLabels">module:API.wrapLabels</a></li>
<li><a href="module-API.html#.labelSplitCharacter">module:API.labelSplitCharacter</a></li>
<li><a href="module-API.html#.wrappedLabelWidth">module:API.wrappedLabelWidth</a></li>
<li><a href="module-API.html#.labelsCircular">module:API.labelsCircular</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1.2
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".wrappedLabelWidth"><span class="type-signature">(static) </span>wrappedLabelWidth<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {number|Object}</span></h4>
<div class="description">
<p>The width of the labels, if option <code>wrapLabels</code> is set to true. Needs a <code>render</code> call to take into effect. This option is ignored when <code>labelSplitCharacter</code> is set to a value other then <code>none</code>.</p>
<pre class="prettyprint source"><code>example.wrappedLabelWidth(40).render();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line3863">line 3863</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.showLabels">module:API.showLabels</a></li>
<li><a href="module-API.html#.wrapLabels">module:API.wrapLabels</a></li>
<li><a href="module-API.html#.labelSplitCharacter">module:API.labelSplitCharacter</a></li>
<li><a href="module-API.html#.wrappedLabelLineHeight">module:API.wrappedLabelLineHeight</a></li>
<li><a href="module-API.html#.labelsCircular">module:API.labelsCircular</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
80
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>number</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".zoom"><span class="type-signature">(static) </span>zoom<span class="signature">(centerX<span class="signature-attributes">opt</span>, centerY<span class="signature-attributes">opt</span>, viewportWidth<span class="signature-attributes">opt</span>, duration<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>The graph is centered to the given position and scaled to the calculated scale factor (effective graph with / viewportWidth).</p>
<p>The reason to have a viewportWidth instead of a scale factor is, that you can rely on given data like the coordinates and radius of a node without calculating the scale factor by yourself - you define your desired viewport width and the zoom method is calculating the neccesary scale factor for this viewport width. If the calculated scale factor is less or greater then the configured minimum and maximum scale factors, then these configured scale factors are used. The reason for this a good user experience, since the graph would be otherwise falling back on these scale factors when the user is scaling the graph by mouse or touch events. </p>
<p>No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>var node = example.nodeDataById('8888');
example.zoom(node.x, node.y, node.radius * 6); // default duration of 500ms
var node = example.nodeDataById('9999');
example.zoom(node.x, node.y, node.radius * 6, 1500); // duration of 1500ms</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4226">line 4226</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>centerX</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
graph width / 2
</td>
<td class="description last">
<p>The horizontal center position.</p>
</td>
</tr>
<tr>
<td class="name"><code>centerY</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
graph height / 2
</td>
<td class="description last">
<p>The vertical center position.</p>
</td>
</tr>
<tr>
<td class="name"><code>viewportWidth</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
graph width
</td>
<td class="description last">
<p>The desired viewport width.</p>
</td>
</tr>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
500
</td>
<td class="description last">
<p>the duration of the transition</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".zoomMode"><span class="type-signature">(static) </span>zoomMode<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>If true, you can zoom and pan the graph.</p>
<p>ATTENTION: When zoomMode is set to true then the lassoMode is only working with the pressed alt or shift key.</p>
<p>KNOWN BUG: In iOS it is after the first zoom event no more possible to drag a node - instead the whole graph is moved - this is, because iOS Safari provide a wrong event.target.tagName. Also a problem: your are not able to press the alt or shift key - if you want to use lasso and zoom together on a touch device, you have to provide a workaround. One possible way is to provide a button, which turns zoom mode on and off with the API zoomMode method - then the user has the choice between these two modes - not comfortable, but working.</p>
<p>No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.zoomMode(true);</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4124">line 4124</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoom">module:API.zoom</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".zoomSmooth"><span class="type-signature">(static) </span>zoomSmooth<span class="signature">(centerX<span class="signature-attributes">opt</span>, centerY<span class="signature-attributes">opt</span>, viewportWidth<span class="signature-attributes">opt</span>, duration<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>DEPRECATED: Please use zoom instead.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4257">line 4257</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoom">module:API.zoom</a></li>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>centerX</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
graph width / 2
</td>
<td class="description last">
<p>The horizontal center position.</p>
</td>
</tr>
<tr>
<td class="name"><code>centerY</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
graph height / 2
</td>
<td class="description last">
<p>The vertical center position.</p>
</td>
</tr>
<tr>
<td class="name"><code>viewportWidth</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
graph width
</td>
<td class="description last">
<p>The desired viewport width.</p>
</td>
</tr>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1500
</td>
<td class="description last">
<p>the duration of the transition</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".zoomToFit"><span class="type-signature">(static) </span>zoomToFit<span class="signature">(duration<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object}</span></h4>
<div class="description">
<p>Helper/Command method - automatically zoom, so that the whole graph is visible and optimal sized. No <code>render</code> or <code>resume</code> call needed to take into effect:</p>
<pre class="prettyprint source"><code>example.zoomToFit();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4372">line 4372</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
<li><a href="module-API.html#.zoomToFitOnForceEnd">module:API.zoomToFitOnForceEnd</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
500
</td>
<td class="description last">
<p>The transition duration in milliseconds.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".zoomToFitOnForceEnd"><span class="type-signature">(static) </span>zoomToFitOnForceEnd<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>Automatically zoom at force end, so that the whole graph is visible and optimal sized. If enabled it fires at every force end event. If you only want to resize your graph once than have a look at the command/helper method <code>zoomToFit</code>:</p>
<pre class="prettyprint source"><code>//change config and resize once
example.zoomToFitOnForceEnd(true).zoomToFit();
//resize only once
example.zoomToFit();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4409">line 4409</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
<li><a href="module-API.html#.zoomToFit">module:API.zoomToFit</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
<div class="section-method">
<h4 class="name" id=".zoomToFitOnResize"><span class="type-signature">(static) </span>zoomToFitOnResize<span class="signature">(value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean|Object}</span></h4>
<div class="description">
<p>Automatically zoom at resize (API call of <code>width</code>, <code>height</code> or responsive change of parent container size with option <code>useDomParentWidth</code> set to true), so that the whole graph is visible and optimal sized. </p>
<p>The event is harmonized/delayed for performance reasons. It could fire very often when for example the browser window is resized by the user. If the graph force simulation is running and not cooled down it is executed on the force end event. Also see the corresponding option <code>onResizeFunctionTimeout</code> which has a default value of 300 (milliseconds).</p>
<p>If you only want to resize your graph once than have a look at the command/helper method <code>zoomToFit</code>:</p>
<pre class="prettyprint source"><code>//change config and resize once
example.zoomToFitOnResize(true).zoomToFit();
//resize only once
example.zoomToFit();</code></pre>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="d3-force.js.html">d3-force.js</a>, <a href="d3-force.js.html#line4443">line 4443</a>
</li></ul></dd>
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-API.html#.onResizeFunctionTimeout">module:API.onResizeFunctionTimeout</a></li>
<li><a href="module-API.html#.zoomMode">module:API.zoomMode</a></li>
<li><a href="module-API.html#.zoomSmooth">module:API.zoomSmooth</a></li>
<li><a href="module-API.html#.minZoomFactor">module:API.minZoomFactor</a></li>
<li><a href="module-API.html#.maxZoomFactor">module:API.maxZoomFactor</a></li>
<li><a href="module-API.html#.transform">module:API.transform</a></li>
<li><a href="module-API.html#.zoomToFit">module:API.zoomToFit</a></li>
<li><a href="module-API.html#.zoomToFitOnForceEnd">module:API.zoomToFitOnForceEnd</a></li>
</ul>
</dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
<p>The new config value.</p>
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
|
<span class="param-type"><code>Object</code></span>
</dd>
</dl>
<div class="param-desc">
<p>The current config value if no parameter is given or the graph object for method chaining.</p>
</div>
</div>
</div>
</article>
</section>
</div>
<br class="clear">
<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Apr 28 2019 15:36:35 GMT+0200 (Mitteleuropäische Sommerzeit) using the Minami theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>