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.
326 lines
30 KiB
HTML
326 lines
30 KiB
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>Getting Started - 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">Getting Started</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<section>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<article>
|
||
|
|
<p><button onclick="example.useDomParentWidth((example.useDomParentWidth()?false:true))">Toggle option useDomParentWidth</button>
|
||
|
|
<div id="example"></div><!--the graph container-->
|
||
|
|
<link href="./lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||
|
|
<script src="./lib/ResizeObserver-1.5.0.min.js"></script>
|
||
|
|
<script src="./lib/d3-3.5.6.min.js"></script>
|
||
|
|
<script src="./lib/d3-force-3.1.0.min.js"></script>
|
||
|
|
<script>
|
||
|
|
window.onload = function (){
|
||
|
|
window.example = netGobrechtsD3Force("example")
|
||
|
|
.width(1500)
|
||
|
|
.height(1000)
|
||
|
|
.chargeDistance(1500)
|
||
|
|
.lassoMode(true)
|
||
|
|
.wrapLabels(true)
|
||
|
|
.debug(true) //also creates the "Customize Me" link
|
||
|
|
.render({
|
||
|
|
"data": {
|
||
|
|
"nodes": [{
|
||
|
|
"ID": "1",
|
||
|
|
"LABEL": "SITUATIONISM",
|
||
|
|
"COLORVALUE": "10",
|
||
|
|
"COLORLABEL": "Accounting",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
"LABELCIRCULAR": true,
|
||
|
|
"LINK": "http://apex.oracle.com/",
|
||
|
|
"INFOSTRING": "Situazionismo e libertà",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "2",
|
||
|
|
"LABEL": "First World Congress of Liberated Artists",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"LABELCIRCULAR": false,
|
||
|
|
|
||
|
|
"SIZEVALUE": 3500
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "3",
|
||
|
|
"LABEL": "Lettrist International",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "4",
|
||
|
|
"LABEL": "International Movement for an Imaginist Bauhaus",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850,
|
||
|
|
"INFOSTRING": "cipollotti"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "5",
|
||
|
|
"LABEL": "London Psychogeography Association",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "6",
|
||
|
|
"LABEL": "Socialism ou Barbarie",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "7",
|
||
|
|
"LABEL": "Lettrism",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 1200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "8",
|
||
|
|
"LABEL": "COBRA",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 1200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "9",
|
||
|
|
"LABEL": "ULM",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 3500,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "10",
|
||
|
|
"LABEL": "Bauhaus",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"links": [
|
||
|
|
{
|
||
|
|
"FROMID": "2",
|
||
|
|
"TOID": "1",
|
||
|
|
"STYLE": "solid",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "3",
|
||
|
|
"TOID": "2",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "4",
|
||
|
|
"TOID": "2",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "5",
|
||
|
|
"TOID": "2",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "6",
|
||
|
|
"TOID": "1",
|
||
|
|
"STYLE": "dashed"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "7",
|
||
|
|
"TOID": "3",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "8",
|
||
|
|
"TOID": "4",
|
||
|
|
"STYLE": "solid"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "9",
|
||
|
|
"TOID": "4",
|
||
|
|
"STYLE": "dashed",
|
||
|
|
"COLOR": "red"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "10",
|
||
|
|
"TOID": "9",
|
||
|
|
"STYLE": "dotted"
|
||
|
|
}
|
||
|
|
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}); //sample data is provided when called without data
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</p>
|
||
|
|
<p>The graph above was started with this code:</p>
|
||
|
|
<pre class="prettyprint source lang-html"><code><button onclick="example.useDomParentWidth((example.useDomParentWidth()?false:true))">Toggle option useDomParentWidth</button>
|
||
|
|
<div id="example"></div><!--the graph container-->
|
||
|
|
<link href="./lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||
|
|
<script src="./lib/ResizeObserver-1.5.0.min.js"></script>
|
||
|
|
<script src="./lib/d3-3.5.6.min.js"></script>
|
||
|
|
<script src="./lib/d3-force-3.1.0.min.js"></script>
|
||
|
|
<script>
|
||
|
|
window.onload = function (){
|
||
|
|
window.example = netGobrechtsD3Force("example")
|
||
|
|
.width(600)
|
||
|
|
.height(400)
|
||
|
|
.lassoMode(true)
|
||
|
|
.wrapLabels(true)
|
||
|
|
.debug(true) //also creates the "Customize Me" link
|
||
|
|
.render(); //sample data is provided when called without data
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</code></pre><h2>Installation</h2><h3>APEX</h3><ul>
|
||
|
|
<li>Download the <a href="https://github.com/ogobrecht/d3-force-apex-plugin/releases/latest">latest version</a></li>
|
||
|
|
<li>Install the plugin by importing the sql file in the folder <code>apex-plugin</code></li>
|
||
|
|
</ul>
|
||
|
|
<h3>Any HTML page</h3><ul>
|
||
|
|
<li>Download the <a href="https://github.com/ogobrecht/d3-force-apex-plugin/releases/latest">latest version</a></li>
|
||
|
|
<li>See <code>dist/example.html</code></li>
|
||
|
|
</ul>
|
||
|
|
<p>When using the Oracle APEX plugin, your variable to access the graph is automatically set by the plugin. You can open the JavaScript console in your browser and look for <code>d3_force_YOUR_REGION_STATIC_ID</code>. You can then interact with the graph - in the example we inspect the graphs current variables:</p>
|
||
|
|
<pre class="prettyprint source lang-js"><code>example.inspect(); // in the example above
|
||
|
|
d3_force_YOUR_REGION_STATIC_ID.inspect(); // when using the Oracle APEX plugin
|
||
|
|
|
||
|
|
// or you can change the width of your graph:
|
||
|
|
example.width(700).resume();
|
||
|
|
d3_force_YOUR_REGION_STATIC_ID.width(700).resume();
|
||
|
|
|
||
|
|
// there are more then sixty methods...
|
||
|
|
// please have a look in the API methods overview</code></pre><h2>Providing Data</h2><p>You can provide data to the <a href="./module-API.html#.render">render</a> (or <a href="./module-API.html#.start">start</a> ) function. This data can be a JSON object, a JSON string or a XML string. Below the call for the graph variable <code>example</code> with the graph method <code>render</code> and the data for two nodes and links.</p>
|
||
|
|
<p>For all people outside the Oracle world: we use here data from an example employees table which is used since years for almost all Oracle related SQL trainings. Inside this table you find employees with an ID, name, salary, department ID and so on. We use here the department ID to color the nodes and the salary to calculate the node sizes.</p>
|
||
|
|
<p>Please have also a look at the <a href="./tutorial-2-node-and-link-attributes.html">possible node and link attributes</a></p>
|
||
|
|
<pre class="prettyprint source lang-js"><code>example.render({
|
||
|
|
"data": {
|
||
|
|
"nodes": [{
|
||
|
|
"ID": "7839",
|
||
|
|
"LABEL": "KING is THE KING, you know?",
|
||
|
|
"COLORVALUE": "10",
|
||
|
|
"COLORLABEL": "Accounting",
|
||
|
|
"SIZEVALUE": 5000,
|
||
|
|
"LABELCIRCULAR": true,
|
||
|
|
"LINK": "http://apex.oracle.com/",
|
||
|
|
"INFOSTRING": "This visualization is based on the well known emp table."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"ID": "7698",
|
||
|
|
"LABEL": "BLAKE",
|
||
|
|
"COLORVALUE": "30",
|
||
|
|
"COLORLABEL": "Sales",
|
||
|
|
"SIZEVALUE": 2850
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"links": [{
|
||
|
|
"FROMID": "7839",
|
||
|
|
"TOID": "7839",
|
||
|
|
"STYLE": "dotted",
|
||
|
|
"COLOR": "blue",
|
||
|
|
"INFOSTRING": "This is a self link (same source and target node) rendered along a path with the STYLE attribute set to dotted and COLOR attribute set to blue."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"FROMID": "7698",
|
||
|
|
"TOID": "7839",
|
||
|
|
"STYLE": "dashed"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
});</code></pre><p>You can export the current graph data as a JSON object at every time with the <a href="./module-API.html#.data">data</a> method:</p>
|
||
|
|
<pre class="prettyprint source lang-js"><code>//JSON object
|
||
|
|
example.data();
|
||
|
|
|
||
|
|
//stringified JSON object
|
||
|
|
JSON.stringify(example.data());</code></pre><h2>Configure The Graph</h2><p>There are two ways to configure the graph:</p>
|
||
|
|
<ol>
|
||
|
|
<li>Provide a configuration object to the graph function on initialisation</li>
|
||
|
|
<li>Use API methods before starting the graph or also on runtime</li>
|
||
|
|
</ol>
|
||
|
|
<h3>Configuration Object</h3><pre class="prettyprint source lang-js"><code>var example = netGobrechtsD3Force(
|
||
|
|
'domContainerToAppendTheGraph',
|
||
|
|
{"width":"700", "height":"500"}
|
||
|
|
)
|
||
|
|
.render({"data":{
|
||
|
|
"nodes":[{...}, {...}],
|
||
|
|
"links":[{...}, {...}]
|
||
|
|
}});</code></pre><h3>API Methods</h3><pre class="prettyprint source lang-js"><code>var example = netGobrechtsD3Force(
|
||
|
|
'domContainerToAppendTheGraph'
|
||
|
|
)
|
||
|
|
.width(700)
|
||
|
|
.height(500)
|
||
|
|
.render({"data":{
|
||
|
|
"nodes":[{...}, {...}],
|
||
|
|
"links":[{...}, {...}]
|
||
|
|
}});</code></pre><p>Of course you can combine the two ways:</p>
|
||
|
|
<pre class="prettyprint source lang-js"><code>var example = netGobrechtsD3Force(
|
||
|
|
'domContainerToAppendTheGraph',
|
||
|
|
{"width":"700","height":"500"}
|
||
|
|
)
|
||
|
|
.onNodeClickFunction(
|
||
|
|
function(event, data){
|
||
|
|
console.log(event, data, this);
|
||
|
|
}
|
||
|
|
)
|
||
|
|
.debug(true)
|
||
|
|
.render({"data":{
|
||
|
|
"nodes":[{...}, {...}],
|
||
|
|
"links":[{...}, {...}]
|
||
|
|
}});</code></pre><p>If the DOM container is not existing, then the container is created under the body element.</p>
|
||
|
|
<h3>Customization wizard</h3><p>You can use the customization wizard to get your configuration object. This<br>wizard has a predefined set of values, e.g. you can choose values between 300<br>and 1200 for the width. If this does not meet your requirements, you can of<br>course change these values in your configuration object. If you do so and use<br>the customization wizard later on, your additional values are appended to the<br>select lists of the wizard.</p>
|
||
|
|
<p>There are two ways to start the wizard:</p>
|
||
|
|
<ol>
|
||
|
|
<li>Click the link “Customize Me” in the graph - this link is shown, when the graph is in debug mode (when you are using the APEX plugin with a Application Builder session, then the debug mode is automatically set to true): <code>example.debug(true);</code></li>
|
||
|
|
<li>Directly start the wizard by setting the customize option to true: <code>example.customize(true);</code></li>
|
||
|
|
</ol>
|
||
|
|
<p>Each configuration option in the wizard is also implemented as a get and set method:</p>
|
||
|
|
<pre class="prettyprint source lang-js"><code>example.width(); //get the current graph width
|
||
|
|
example.width(700).resume(); //set the current graph width and resume the graph</code></pre><p>ATTENTION: Some options/methods are instantly working, some needs a resume of the graph force, some needs a complete render cycle with the start or render method. Please have also a look in the method descriptions for <a href="./module-API.html#.start">start</a>, <a href="./module-API.html#.render">render</a>, <a href="./module-API.html#.resume">resume</a>.</p>
|
||
|
|
</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>
|