end
parent
929e62cdc7
commit
b991938cdb
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 780 KiB After Width: | Height: | Size: 780 KiB |
@ -0,0 +1,274 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Network Advanced</title>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/prettify.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/lang-css.js"></script>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="example"></div><!--the graph container-->
|
||||||
|
<link href="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/ResizeObserver-1.5.0.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-3.5.6.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var w = window.innerWidth;
|
||||||
|
var h = window.innerHeight;
|
||||||
|
|
||||||
|
window.onload = function (){
|
||||||
|
window.example = netGobrechtsD3Force("example")
|
||||||
|
.width(w)
|
||||||
|
.height(h)
|
||||||
|
.charge(-800)
|
||||||
|
.wrapLabels(true)
|
||||||
|
.zoomMode(true)
|
||||||
|
.debug(true) //also creates the "Customize Me" link
|
||||||
|
.render({
|
||||||
|
"data": {
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"ID": "1",
|
||||||
|
"LABEL": "SYSTEM SCIENCE",
|
||||||
|
"COLORVALUE": "1",
|
||||||
|
"COLORLABEL": "system science",
|
||||||
|
"SIZEVALUE": 1500,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "2",
|
||||||
|
"LABEL": "CYBERNETICS",
|
||||||
|
"COLORVALUE": "6",
|
||||||
|
"COLORLABEL": "cybernetics",
|
||||||
|
"SIZEVALUE": 1500,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "3",
|
||||||
|
"LABEL": "DYNAMICAL SYSTEMS THEORY",
|
||||||
|
"COLORVALUE": "3",
|
||||||
|
"COLORLABEL": "dynamical systems",
|
||||||
|
"SIZEVALUE": 1500,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "4",
|
||||||
|
"LABEL": "COMPLEX SYSTEMS THEORY",
|
||||||
|
"COLORVALUE": "4",
|
||||||
|
"COLORLABEL": "complex systems",
|
||||||
|
"SIZEVALUE": 1500,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "5",
|
||||||
|
"LABEL": "General Systems Theory",
|
||||||
|
"COLORVALUE": "5",
|
||||||
|
"COLORLABEL": "Systems ecology",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "6",
|
||||||
|
"LABEL": "Ecological Systems Theory",
|
||||||
|
"COLORVALUE": "5",
|
||||||
|
"COLORLABEL": "Systems ecology",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "7",
|
||||||
|
"LABEL": "Self-Organization",
|
||||||
|
"COLORVALUE": "4",
|
||||||
|
"COLORLABEL": "complex systems",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "8",
|
||||||
|
"LABEL": "Autopoiesis / Embodied Mind",
|
||||||
|
"COLORVALUE": "4",
|
||||||
|
"COLORLABEL": "complex systems",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "9",
|
||||||
|
"LABEL": "2nd Order Cybernetics",
|
||||||
|
"COLORVALUE": "6",
|
||||||
|
"COLORLABEL": "cybernetics",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "10",
|
||||||
|
"LABEL": "AI",
|
||||||
|
"COLORVALUE": "9",
|
||||||
|
"COLORLABEL": "AI",
|
||||||
|
"SIZEVALUE": 1500,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "11",
|
||||||
|
"LABEL": "Cognitive Science",
|
||||||
|
"COLORVALUE": "8",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 700,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "12",
|
||||||
|
"LABEL": "Semiotics Linguistics",
|
||||||
|
"COLORVALUE": "7",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "13",
|
||||||
|
"LABEL": "Fractal Geometry",
|
||||||
|
"COLORVALUE": "3",
|
||||||
|
"COLORLABEL": "dynamical systems",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "14",
|
||||||
|
"LABEL": "Nonlinear Systems",
|
||||||
|
"COLORVALUE": "3",
|
||||||
|
"COLORLABEL": "dynamical systems",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "15",
|
||||||
|
"LABEL": "Chaos theory",
|
||||||
|
"COLORVALUE": "3",
|
||||||
|
"COLORLABEL": "dynamical systems",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "16",
|
||||||
|
"LABEL": "Complex living systems",
|
||||||
|
"COLORVALUE": "5",
|
||||||
|
"COLORLABEL": "Systems ecology",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "17",
|
||||||
|
"LABEL": "Gaia Hypothesis",
|
||||||
|
"COLORVALUE": "5",
|
||||||
|
"COLORLABEL": "Systems ecology",
|
||||||
|
"SIZEVALUE": 1000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "3",
|
||||||
|
"STYLE": "dashed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "4",
|
||||||
|
"STYLE": "dashed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "2",
|
||||||
|
"STYLE": "dashed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "1",
|
||||||
|
"STYLE": "dashed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "4",
|
||||||
|
"STYLE": "dashed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "10",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "3",
|
||||||
|
"TOID": "13",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "3",
|
||||||
|
"TOID": "14",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "3",
|
||||||
|
"TOID": "15",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "5",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "6",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "16",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "16",
|
||||||
|
"TOID": "17",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "9",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "11",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "12",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "4",
|
||||||
|
"TOID": "7",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "4",
|
||||||
|
"TOID": "8",
|
||||||
|
"STYLE": "solid",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}); //sample data is provided when called without data
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
*.sql linguist-language=PLSQL
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
.DS_Store
|
||||||
|
.idea
|
||||||
|
node_modules
|
||||||
|
api-reference.md
|
||||||
|
example-query.sql
|
||||||
|
js/temp.js
|
||||||
|
d3-force-apex-plugin-demo-app.sql
|
||||||
|
d3-force-apex-plugin-demo-app.zip
|
||||||
|
description-apex-plugin.com.html
|
||||||
|
description-sample-app.html
|
||||||
|
temp.txt
|
||||||
|
temp.html
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"tags": {
|
||||||
|
"allowUnknownTags": true
|
||||||
|
},
|
||||||
|
"plugins": ["plugins/markdown"],
|
||||||
|
"templates": {
|
||||||
|
"cleverLinks": false,
|
||||||
|
"monospaceLinks": false,
|
||||||
|
"useLongnameInNav": false,
|
||||||
|
"showInheritedInNav": true
|
||||||
|
},
|
||||||
|
"markdown": {
|
||||||
|
"parser": "gfm",
|
||||||
|
"hardwrap": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,140 @@
|
|||||||
|
/* global module */
|
||||||
|
module.exports = function(grunt) {
|
||||||
|
"use strict";
|
||||||
|
grunt.initConfig({
|
||||||
|
pkg: grunt.file.readJSON("apexplugin.json"),
|
||||||
|
currentYear: parseInt(grunt.template.today("yyyy")),
|
||||||
|
banner: '/**\n' +
|
||||||
|
' * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
|
||||||
|
'<%= pkg.homepage ? " * " + pkg.homepage + "\\n" : "" %>' +
|
||||||
|
' * Copyright (c) 2015<%= currentYear > 2015 ? "-" + currentYear : "" %> <%= pkg.author.name %> - <%= pkg.license %> license\n' +
|
||||||
|
' */\n',
|
||||||
|
exampleGraph: '<button onclick="example.useDomParentWidth((example.useDomParentWidth()?false:true))">Toggle option useDomParentWidth</button>\n' +
|
||||||
|
'<div id="example"></div><!--the graph container-->\n' +
|
||||||
|
'<link href="./lib/d3-force-<%= pkg.version %>.css" rel="stylesheet" type="text/css">\n' +
|
||||||
|
'<script src="./lib/ResizeObserver-1.5.0.min.js"></script>\n' +
|
||||||
|
'<script src="./lib/d3-3.5.6.min.js"></script>\n' +
|
||||||
|
'<script src="./lib/d3-force-<%= pkg.version %>.min.js"></script>\n' +
|
||||||
|
'<script>\n' +
|
||||||
|
' window.onload = function (){\n' +
|
||||||
|
' window.example = netGobrechtsD3Force("example")\n' +
|
||||||
|
' .width(600)\n' +
|
||||||
|
' .height(400)\n' +
|
||||||
|
' .lassoMode(true)\n' +
|
||||||
|
' .wrapLabels(true)\n' +
|
||||||
|
' .debug(true) //also creates the "Customize Me" link\n' +
|
||||||
|
' .render(); //sample data is provided when called without data\n' +
|
||||||
|
' }\n' +
|
||||||
|
'</script>\n',
|
||||||
|
jshint: {
|
||||||
|
files: [
|
||||||
|
"Gruntfile.js",
|
||||||
|
"apexplugin.json",
|
||||||
|
"src/d3-force.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
clean: ["docs", "dist/*.css", "dist/*.js"],
|
||||||
|
copy: {
|
||||||
|
dist1: {
|
||||||
|
src: "src/d3-force.js",
|
||||||
|
dest: "dist/d3-force-<%= pkg.version %>.js",
|
||||||
|
options: {
|
||||||
|
process: function(content, srcpath) {
|
||||||
|
return grunt.template.process("<%= banner %>") + "\n" +
|
||||||
|
content.replace(/x\.x\.x/g, grunt.template.process("<%= pkg.version %>"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dist2: {
|
||||||
|
files: [{
|
||||||
|
src: "src/d3-force.css",
|
||||||
|
dest: "dist/d3-force-<%= pkg.version %>.css"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "src/example.html",
|
||||||
|
dest: "dist/example.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "src/LICENSE.txt",
|
||||||
|
dest: "LICENSE.txt"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
process: function(content) {
|
||||||
|
return content
|
||||||
|
.replace(/x\.x\.x/g, grunt.template.process("<%= pkg.version %>"))
|
||||||
|
.replace(/{{CURRENT-YEAR}}/g, grunt.template.process("<%= currentYear %>"))
|
||||||
|
.replace(/{{EXAMPLE-GRAPH}}/g, grunt.template.process("<%= exampleGraph %>"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
docs1: {
|
||||||
|
files: [{
|
||||||
|
src: "docs/tutorial-1-getting-started.html",
|
||||||
|
dest: "docs/tutorial-1-getting-started.html"
|
||||||
|
}],
|
||||||
|
options: {
|
||||||
|
process: function(content, srcpath) {
|
||||||
|
return content.replace(/{{EXAMPLE-GRAPH}}/g, grunt.template.process("<%= exampleGraph %>"))
|
||||||
|
.replace(/{{EXAMPLE-GRAPH-CODE}}/g, grunt.template.process("<%= exampleGraph %>").replace(/</g, "<"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
docs2: {
|
||||||
|
files: [{
|
||||||
|
src: "dist/lib/d3/d3-3.5.6.min.js",
|
||||||
|
dest: "docs/lib/d3-3.5.6.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "dist/lib/resize-observer-polyfill/ResizeObserver-1.5.0.min.js",
|
||||||
|
dest: "docs/lib/ResizeObserver-1.5.0.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "dist/d3-force-<%= pkg.version %>.css",
|
||||||
|
dest: "docs/lib/d3-force-<%= pkg.version %>.css"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "dist/d3-force-<%= pkg.version %>.min.js",
|
||||||
|
dest: "docs/lib/d3-force-<%= pkg.version %>.min.js"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
uglify: {
|
||||||
|
options: {
|
||||||
|
banner: "<%= banner %>"
|
||||||
|
},
|
||||||
|
dist: {
|
||||||
|
src: "dist/d3-force-<%= pkg.version %>.js",
|
||||||
|
dest: "dist/d3-force-<%= pkg.version %>.min.js"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
jsdoc: {
|
||||||
|
docs: {
|
||||||
|
src: ["README.md", "src/*.js"],
|
||||||
|
options: {
|
||||||
|
destination: "docs",
|
||||||
|
tutorials: "src/tutorials",
|
||||||
|
template: "node_modules/minami",
|
||||||
|
configure: ".jsdoc.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
files: [
|
||||||
|
"Gruntfile.js",
|
||||||
|
"apexplugin.json",
|
||||||
|
"src/**"
|
||||||
|
],
|
||||||
|
tasks: ["default"]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
grunt.loadNpmTasks("grunt-contrib-jshint");
|
||||||
|
grunt.loadNpmTasks("grunt-contrib-copy");
|
||||||
|
grunt.loadNpmTasks("grunt-contrib-uglify");
|
||||||
|
grunt.loadNpmTasks("grunt-contrib-clean");
|
||||||
|
grunt.loadNpmTasks("grunt-contrib-watch");
|
||||||
|
grunt.loadNpmTasks("grunt-notify");
|
||||||
|
grunt.loadNpmTasks("grunt-jsdoc");
|
||||||
|
grunt.registerTask("default", ["jshint", "clean", "copy:dist1", "copy:dist2", "uglify", "jsdoc", "copy:docs1", "copy:docs2"]);
|
||||||
|
};
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015-2019 Ottmar Gobrecht
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@ -0,0 +1,267 @@
|
|||||||
|
[Latest version][zip] | [Docs & API Reference][docs] | [Online demo][demo] | [APEX Plugin demo][apexdemo]
|
||||||
|
|
||||||
|
[zip]: https://github.com/ogobrecht/d3-force-apex-plugin/releases/latest
|
||||||
|
[docs]: https://ogobrecht.github.io/d3-force-apex-plugin/
|
||||||
|
[demo]: https://ogobrecht.github.io/d3-force-apex-plugin/tutorial-1-getting-started.html
|
||||||
|
[apexdemo]: https://apex.oracle.com/pls/apex/f?p=18290
|
||||||
|
|
||||||
|
|
||||||
|
# Oracle APEX Region Type Plugin: D3 Force Network Chart
|
||||||
|
|
||||||
|
This is a D3 force implementation, playground and Oracle APEX plugin, which uses the
|
||||||
|
[D3 visualization library](http://d3js.org/) to render a network layout. It has the following features:
|
||||||
|
|
||||||
|
- Works with APEX versions >= 5.1.4 or standalone in every HTML page
|
||||||
|
- Interactive customization wizard
|
||||||
|
- Source data can be a XML string, JSON string or JavaScript Object (JSON)
|
||||||
|
- Link directions are visible and self references are rendered in a nice way - have a look in the online demos
|
||||||
|
- Node sizes are calculated between given min and max values depending on the SIZEVALUE attribute in your source data
|
||||||
|
- Node colors are assigned depending on the given COLORVALUE attribute in your source data - if you provide a IMAGE attribute for a node, then the image is used instead of a fill color
|
||||||
|
- Optional tooltips depending on the given INFOSTRING attribute in your source data
|
||||||
|
- If you have a node attribute called LINK, you can define on which event the URL should be called - default is dblclick - try it out in the online demos by double clicking the node KING
|
||||||
|
- Nodes can be pinned and the current positions can be saved and loaded to predefine a layout - optionally you can align the nodes to a grid when they are dragged around
|
||||||
|
- Labels can be wrapped and placed after force end to prevent overlapping (optional, per default switched off)
|
||||||
|
- With the lasso mode you can select nodes and implement a graphical multi select
|
||||||
|
- The graph can be zoomed between the two configured min and max scale factors
|
||||||
|
- There is a JavaScript API to interact with the graph ([API reference][docs]), also including 12 events (node click, node double click, node contextmenu, node mouse enter, node mouse leave, link click, lasso start, lasso end, force start, force end, render end, resize)
|
||||||
|
- All 12 events are available in APEX - the plugin region can be AJAX refreshed and triggers then also apexbeforerefresh and apexafterrefresh
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
- APEX 5.1.4 or higher, if used as a plugin
|
||||||
|
- A modern browser, which is able to work with SVG and CSS3 - for more informations see the [D3 Wiki](https://github.com/mbostock/d3/wiki#browser--platform-support)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
|
||||||
|
### APEX
|
||||||
|
|
||||||
|
- Download the [latest version][zip]
|
||||||
|
- Install the plugin by importing the sql file in the folder `apex-plugin`
|
||||||
|
|
||||||
|
|
||||||
|
### Any HTML page
|
||||||
|
|
||||||
|
- Download the [latest version][zip]
|
||||||
|
- See `dist/example.html` and `docs/tutorial-1-getting-started.html`
|
||||||
|
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
I would like to say THANK YOU to all the people who share their knowledge. Without this sharing I would not have been able to create this D3 implementation. Special thanks to Mike Bostock for his great library and to Carsten Czarski for mentoring me on Oracle APEX plugin development.
|
||||||
|
|
||||||
|
|
||||||
|
## Roadmap
|
||||||
|
|
||||||
|
### 4.0.0 (201x-xx-xx) in planning
|
||||||
|
|
||||||
|
- Update to current D3 version (5.x.x): [link 1](https://github.com/d3/d3/blob/master/CHANGES.md#forces-d3-force), [link 2](https://github.com/d3/d3-force/blob/master/README.md)
|
||||||
|
- Devide code base into modularized graph code and APEX plugin code in different repos to make clear, that the graph function can run in any HTML environment
|
||||||
|
|
||||||
|
|
||||||
|
## Changelog
|
||||||
|
|
||||||
|
This D3 force implementation uses [semantic versioning](http://semver.org).
|
||||||
|
|
||||||
|
Please refer to the [documentation](https://ogobrecht.github.io/d3-force-apex-plugin/) for more informations on how to get started and an overview of all graph methods. Please use for all comments and discussions the [issues functionality on GitHub](https://github.com/ogobrecht/d3-force-apex-plugin/issues).
|
||||||
|
|
||||||
|
### 3.1.0 (2019-06-02)
|
||||||
|
|
||||||
|
ATTENTION: You need at least APEX 5.1.4 to be able to import the plugin in your APEX apps. If you need to support older APEX versions (at least 4.2) then download the plugin release 3.0.0.
|
||||||
|
|
||||||
|
- New option forceTimeLimit ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.forceTimeLimit))
|
||||||
|
- Nodes have now also a background color when an background image is defined (useful for images with transparency)
|
||||||
|
- New Link attribute LABEL ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/tutorial-2-node-and-link-attributes.html)), which is rendered as a text along the link path and fires the link click event when clicked (the label is easier to click then the link itself - so we have here a usability improvement)
|
||||||
|
- Two new helper methods to get the center of the graph (border box) or the SVG viewport:
|
||||||
|
- centerPositionGraph ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.centerPositionGraph))
|
||||||
|
- centerPositionViewport ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.centerPositionViewport))
|
||||||
|
|
||||||
|
Thanks are going to github.com/Ignacius68 for the valuable feedback and all the beta testing.
|
||||||
|
|
||||||
|
|
||||||
|
### 3.0.0 (2018-11-26)
|
||||||
|
|
||||||
|
Because of breaking API changes we have a new major realease:
|
||||||
|
|
||||||
|
- Overall improvements
|
||||||
|
- Better responsiveness by implementing a resize observer (native in Chrome since v64, polyfill for other browsers)
|
||||||
|
- Default true for the following options: `zoomToFitOnForceEnd` (was false in the past), `zoomToFitOnResize` (new option), `keepAspectRatioOnResize` (new option)
|
||||||
|
- When setting the option `useDomParentWidth` to true together with the previous mentioned defaults you can achieve a responsiveness like with images set to width 100% - see the [online demo][demo] and play around with it
|
||||||
|
- All zoom relevant API methods are no longer depending on the `zoomMode` - they work simply always
|
||||||
|
- The `zoomMode` sets only the ability for the end user to use zoom and pan
|
||||||
|
- Fixed
|
||||||
|
- APEX plug-in - sample data is rendered before live data (#32) - thanks are going to github.com/Ignacius68 for finding this bug
|
||||||
|
- New events
|
||||||
|
- Resize ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.onResizeFunction))
|
||||||
|
- New options
|
||||||
|
- labelSplitCharacter ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.labelSplitCharacter))
|
||||||
|
- onResizeFunction ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.onResizeFunction))
|
||||||
|
- onResizeFunctionTimeout ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.onResizeFunctionTimeout))
|
||||||
|
- zoomToFitOnResize ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.zoomToFitOnResize))
|
||||||
|
- keepAspectRatioOnResize ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.keepAspectRatioOnResize))
|
||||||
|
- Changed methods
|
||||||
|
- `zoom` has now a parameter `duration` ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.zoom))
|
||||||
|
- `transform` has now a parameter `duration` ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.transform))
|
||||||
|
- `useDomParentWidth` ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.useDomParentWidth)) no longer needs a render call to take into effect - it works now immediately; Please remove unneccesary render calls to save CPU and battery time
|
||||||
|
- Deprecated methods for clean API
|
||||||
|
- `zoomSmooth` - can be replaced with the `zoom` method ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.zoom)), please provide a appropriate duration parameter (default is 1500 with zoomSmooth)
|
||||||
|
|
||||||
|
Thanks are going to github.com/Ignacius68 for the idea for option `labelSplitCharacter` and all the beta testing.
|
||||||
|
|
||||||
|
### 2.2.0 (2018-09-29)
|
||||||
|
|
||||||
|
- New events
|
||||||
|
- Render end ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.onRenderEndFunction))
|
||||||
|
- Force start ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.onForceStartFunction))
|
||||||
|
- Force end ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.onForceEndFunction))
|
||||||
|
- New graph methods
|
||||||
|
- nodes ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.nodes))
|
||||||
|
- links ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.links))
|
||||||
|
- selfLinks ([API reference](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.selfLinks))
|
||||||
|
- All three returning a D3 selection (array) for direct manipulation with D3 methods like `style` or `classed` - also see the [D3 docs](https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#operating-on-selections)
|
||||||
|
|
||||||
|
Thanks are going to github.com/Ignacius68 for the inspiration.
|
||||||
|
|
||||||
|
### 2.1.2 (2018-01-07)
|
||||||
|
|
||||||
|
- Fixed again :-(
|
||||||
|
- APEX plugin - semi colon in region query no longer throws an error
|
||||||
|
- Was a copy paste bug... no comments please...
|
||||||
|
|
||||||
|
### 2.1.1 (2018-01-06)
|
||||||
|
|
||||||
|
- Fixed: Nodes stick on the top left corner in APEX 5.x under some circumstances
|
||||||
|
- Improved docs: getting started section
|
||||||
|
|
||||||
|
### 2.1.0 (2017-12-30)
|
||||||
|
|
||||||
|
- New option `wrapLabels` with a configurable max width - thanks to Ekaterina & Andrey for the idea
|
||||||
|
- New option `zoomToFitOnForceEnd` to fit the graph in the available space on force end (like the automatic label placement) - needs the zoomMode switched on to work properly
|
||||||
|
- New API method `zoomToFit`, which is used by the option zoomToFitOnForceEnd - now you can do things like `example.width(800).height(600).zoomToFit()` :-)
|
||||||
|
- APEX enhancements: the graph is listen to the event `apexwindowresized` and the click on the navigation control button in the universal theme - together with the option `useDomParentWidth` the graph is then always using the available width
|
||||||
|
- Changed: Use JSDoc to generate documentation and API reference. Relocate documentation from own Wiki to GitHub pages
|
||||||
|
- Reorganized repository structure
|
||||||
|
- Fixed: Standalone version not loading after APEX 5.1 bugfix
|
||||||
|
- Fixed: APEX plugin - semi colon in region query no longer throws an error
|
||||||
|
|
||||||
|
### 2.0.3 (2016-12-13)
|
||||||
|
|
||||||
|
- Fixed: #18 - APEX 5.1: jQuery reports syntax error and graph stops loading, if "Page Items to Submit" is not configured - thanks to github.com/KiralyCs to report this issue
|
||||||
|
|
||||||
|
|
||||||
|
### 2.0.2 (2016-07-17)
|
||||||
|
|
||||||
|
- Fixed: #12 - tooltips not showing correctly, if showLabels are set to false - thanks to github.com/pocelka to report this issue
|
||||||
|
|
||||||
|
|
||||||
|
### 2.0.1 (2015-11-18)
|
||||||
|
|
||||||
|
- Fixed: Fixed positions not working in initial data in v2.0.0 - thanks to github.com/rlashaw to report this issue
|
||||||
|
- Move online demo and documentation to own wiki for better maintenance
|
||||||
|
|
||||||
|
|
||||||
|
### 2.0.0 (2015-11-07)
|
||||||
|
|
||||||
|
- New option `preventLabelOverlappingOnForceEnd`: 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) - thanks to Philippe Duchateau to ask for such a feature and all the testing
|
||||||
|
- New option `labelPlacementIterations`: The number of iterations for the preventLabelOverlappingOnForceEnd function - default is 250 - as higher the number, as higher the quality of the result - for details refer to the description of the [simulated annealing function](https://github.com/tinker10/D3-Labeler) from the author Evan Wang
|
||||||
|
- New behaviour: the font size and weight of a label is aligned when you hovering a node with your mouse - this helps you to find the right label in graphs with many nodes
|
||||||
|
- New possible value `dotted` for the links `STYLE` attribute: Now you have solid, dashed and dotted available for link styles
|
||||||
|
- New link attribute `INFOSTRING`: Like for nodes - this is shown as a tooltip, if tooltips are switched on in the configuration and you hover the links; ATTENTION: links are very narrow, so this plays nice together with the zoomMode; thanks again to Philippe Duchateau for the ideas of this and the next feature :-)
|
||||||
|
- New link attribute `COLOR`: This must be a HTML color code like `green` or `#00ff00` because of SVG standard 1.1 does not support the inheritance of colors to markers and the graph function hast to manage dynamic markers for the colors and therefore the color names are used as identifiers for the markers
|
||||||
|
- New API method/option `transform`: behaves like a normal getter/setter (the zoom and zoomSmooth methods implements only setters) and can be used in the conf object to initialize the graph with different translate/scale factors than [0,0]/1 - works only, if the zoomMode is set to true - 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 `{"translate":[0,0],"scale":1}`
|
||||||
|
- Fixed: With the option alignFixedNodesToGrid it was possible to place nodes direct on the graphs left or top border - now the nodes are placed to the gridSize value, if the current position is smaller or equal the half of the gridsize
|
||||||
|
- Fixed: Provided fixed positions on startup not correctly set
|
||||||
|
- Fixed: No node shown if there is only one record return (thanks to Kenny Wang for reporting this issue)
|
||||||
|
- Code integration of the D3 lasso and labeler plugins - no more need to load the files for this plugins
|
||||||
|
- Code replacement of the XML to JSON converter X2JS with an own one
|
||||||
|
- Code refactoring against JSHint: This refactoring is also the reason for a new major version (API changed: renamed graph function, integration of libs, new XML parser)
|
||||||
|
- Update to D3 v3.5.6
|
||||||
|
|
||||||
|
|
||||||
|
### 1.4.1 (2015-08-05)
|
||||||
|
|
||||||
|
- Fixed "Tooltip on wrong positions in complex layouts". This was also the case with APEX 5 and universal theme. Thanks to Philippe Duchateau for telling me about this problem.
|
||||||
|
|
||||||
|
|
||||||
|
### 1.4.0 (2015-08-03)
|
||||||
|
|
||||||
|
- New possible node attribute `COLORLABEL`: Since there is an option to render a legend, it makes no sense to render the color names as legend labels, if the colorScheme "direct" is used to directly deliver CSS color codes (thanks to Philippe Duchateau for telling me about the problems); With other color schemes it is ok, since the COLORVALUE information can be any string like department names or ids or city names or whatever; To not to break existing graphs, the COLORVALUE is used as the legend label, if the COLORLABEL is not given in the nodes attributes
|
||||||
|
- New option `onLinkClickFunction`: You can register a function which is called when a link is clicked (thanks to Niels de Bruijn for requesting this feature); 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
|
||||||
|
- New option `setDomParentPaddingToZero`: Boolean. If true, the style `padding: 0px;` is added to the graphs DOM parent element; If false, this style is removed from the graphs DOM parent element
|
||||||
|
- The customization wizard shows now in the configuration object only non-default options; This reduces the size of the configuration object and is more transparent
|
||||||
|
- New API methods `options` and `optionsCustomizationWizard`: with this API methods you can get and set the whole configuration object with one call; `options` ouput includes all options, which are accessible via the API methods including the registered event functions (no APEX dynamic actions, only the functions under the report attributes); `optionsCustomizationWizard` output includes only the options, which are accessible via the customization wizard; With both methods you can set all options which are accessible via the API in one call
|
||||||
|
- Restructuring the online API reference method overview
|
||||||
|
|
||||||
|
|
||||||
|
### 1.3.0 (2015-06-07)
|
||||||
|
|
||||||
|
- New option `showLoadingIndicatorOnAjaxCall`: if set to 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 `showLoadingIndicator` (SHOW: `example.showLoadingIndicator(true);` HIDE: `example.showLoadingIndicator(false);`)
|
||||||
|
- Update to D3 v3.5.5
|
||||||
|
|
||||||
|
|
||||||
|
### 1.2.1 (2015-06-02)
|
||||||
|
|
||||||
|
- Fixed "Customize wizard jumps down when dragged on pages with hidden or fixed elements"
|
||||||
|
|
||||||
|
|
||||||
|
### 1.2.0 (2015-05-31)
|
||||||
|
|
||||||
|
- Refactor render function, so that the returned graph function is only one line of code and does not spoil the console when debug is set to true
|
||||||
|
- New option `zoomMode` (thanks to Alexej Schneider to ask for this feature and for testing the new version and his valuable feedback): I tried this before and was not happy with the solution, because the pan were disturbing the nodes drag functionality - now it is working :-) ATTENTION: When zoomMode is set to true then the lassoMode is only working with the pressed alt or shift key 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
|
||||||
|
- New option `minZoomFactor`: The minimum possible zoom factor
|
||||||
|
- New option `maxZoomFactor`: The maximum possible zoom factor
|
||||||
|
- New method `zoom`: Can be used to programatically zoom to a point in the graph with the three parameters centerX, centerY and viewportWidth; [read more...](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.zoom)
|
||||||
|
- New method `zoomSmooth`: Does the same as the zoom method, but animated in a nice way: [read more...](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.zoomSmooth)
|
||||||
|
- New method `nodeDataById`: Helper function to get the data of one node. Can be helpful for the two new zoom methods to programatically focus a single node
|
||||||
|
- New option `showLegend`: renders a legend for all (distinct) COLORVALUE attribute values of the nodes
|
||||||
|
- New option `showLabels`: Labels are not new - a label is rendered, when a node has a filled attribute LABEL - new is the possibility to switch on and off the labels globally
|
||||||
|
- Hint in the customize wizard, that the configuration object has to be saved in the region attributes to save the configuration permanently (thanks to Renato Nobre to ask me a question about this topic)
|
||||||
|
- Reorganize the options in the customize wizard thematically: node/link/graph related options
|
||||||
|
|
||||||
|
|
||||||
|
### 1.1.0 (2015-04-19)
|
||||||
|
|
||||||
|
- New option `lassoMode`: boolean - if set to true you can select nodes with a lasso
|
||||||
|
- New events for lasso mode: `lassostart`, `lassoend` - if You register to this events, you get as data an object with all nodes, number of selected nodes and also a APEX compatible string of selected node IDs in the form of the multi select lists like `1234:567:890` - for details and examples see API reference
|
||||||
|
- New option `alignFixedNodesToGrid`: boolean - if set to true nodes are aligned to the nearest grid position on the drag end event - works only, if pinMode is set to true (thanks to Carsten Czarski for showing me an use case for this option)
|
||||||
|
- New option `gridSize`: numeric - default 50 - grid size for the new option `alignFixedNodesToGrid`
|
||||||
|
- New possible node attribute `IMAGE`: URL to an image - if you provide this attribute in your source data (SQL query with the APEX plugin), the node is rendered with an background image instead of a fill color (idea by Andrew Weir, thank you for your response!) - attention: this is definitly slowing down your visualization - please do not complain about this fact ;-)
|
||||||
|
- New possible node attributes `fixed`, `x`, `y` (all lower case, because of these are also internal attributes of the D3 force layout): With these attributes you are able to predefine a layout already in your data (SQL query)
|
||||||
|
- New API method `moveFixedNodes(x,y)`: moves all fixed nodes in the provided direction - `exampleGraphVariable.moveFixedNodes(10,-5).resume();` adds 10 to x position and -5 to y position on all fixed nodes - ATTENTION if alignFixedNodesToGrid is set to true this can have unexpected behavior - you must then provide values greater then grid size halved to see any changes on your graph, otherwise the positions are falling back to the nearest (current) grid position
|
||||||
|
- New API method `releaseFixedNodes`
|
||||||
|
- New API method `resume`: with this method you can resume the graph force without a complete render cycle - e.g. you call the new method `releaseFixedNodes` and to take your changes into effect you can call then resume `exampleGraphVariable.releaseFixedNodes().resume();`
|
||||||
|
- New API method `render`: with this method you can render the graph with a complete render cycle - when used standalone there is no difference between the start and the render method - when used as APEX plugin the start method try to fetch new data with the query provided in your region source and call then the render method - with the render method you are now able to rerender the graph in APEX without fetching new data `exampleGraphVariable.minNodeRadius(4).maxNodeRadius(20).render();`
|
||||||
|
- API method positions: In the past this method was only used to predefine a layout before rendering the graph - now you can call this method also after rendering is complete and with calling the new method resume you can apply new positions at runtime without rerender the graph `exampleGraphVariable.positions([...]).resume();` (thanks to Mark Russellbrown to show me an unconventional use case for my force implementation and therefore force me to think about modification after rendering ;-)
|
||||||
|
- New third keyword for the option `nodeLinkTarget` in the customize wizard: "domContainerID" - if you use this keyword, then each event on a node, that opens the link is using the DOM container ID of your graph for the link target - this means, all your links are opened in the same browser window/tab, but a second graph is using a different browser window/tab (thanks to Philippe Duchateau for the question regarding this option) - please have a look in the [API reference for more details](https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.nodeLinkTarget)
|
||||||
|
- Reducing the rendered DOM data by removing unnecessary id attributes on nodes, links and labels
|
||||||
|
- Input data can now be also an object: you have the choice to deliver graph data in three formats (XML string, JSON string or JavaScript Object) - when used as APEX plugin the data is transferred as text - your query has to select a single clob result and this clob can also be a XML or JSON string - you have the choice depending on your database version and existing libraries
|
||||||
|
- Fixed "Dragging a node triggers a click event"
|
||||||
|
|
||||||
|
|
||||||
|
### 1.0.5 (2015-02-21)
|
||||||
|
|
||||||
|
- Fixed "Links not correctly rendered in IE 9, 10, 11 when showLinkDirection is set to true" (found by Philippe Duchateau, thank you for your response!)
|
||||||
|
|
||||||
|
|
||||||
|
### 1.0.4 (2015-02-15)
|
||||||
|
|
||||||
|
- Fixed "APEX - unable to view datasets > 32k" (found by Andrew Weir, thank you for your response!)
|
||||||
|
- Improved error handling: errors are shown as single nodes with error text as label
|
||||||
|
- Empty nodes array does no longer break render function
|
||||||
|
- Positions are rounded on export to save space for APEX parameter item
|
||||||
|
|
||||||
|
|
||||||
|
### 1.0.3 (2015-01-30)
|
||||||
|
|
||||||
|
- Fixed "APEX - AJAX refresh not working without setting items to submit in region source"
|
||||||
|
- Correct links from customize wizard to online API documentation
|
||||||
|
- Activate also debug mode, when customize wizard is started
|
||||||
|
- Some small cosmetic changes
|
||||||
|
|
||||||
|
|
||||||
|
### 1.0.2 (2015-01-30)
|
||||||
|
|
||||||
|
- Fixed "Configuration - Boolean values are not correct initialized" (found by Carsten Czarski, thank you for your response!)
|
||||||
|
- Fixed "APEX - Page items to submit not working on AJAX refresh" (found by Carsten Czarski, thank you for your response!)
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "D3 Force Network Chart",
|
||||||
|
"version": "3.1.0",
|
||||||
|
"description": "D3 force directed network visualization with an interactive customization wizard",
|
||||||
|
"keywords": ["d3.js", "force layout", "network visualization"],
|
||||||
|
"homepage": "https://github.com/ogobrecht/d3-force-apex-plugin",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/ogobrecht/d3-force-apex-plugin/issues"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"author": {
|
||||||
|
"name": "Ottmar Gobrecht",
|
||||||
|
"email": "ottmar.gobrecht@gmail.com",
|
||||||
|
"url": "https://ogobrecht.github.io",
|
||||||
|
"twitter": "ogobrecht",
|
||||||
|
"donationUrl": "https://www.paypal.me/ogobrecht"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/ogobrecht/d3-force-apex-plugin.git"
|
||||||
|
},
|
||||||
|
"oracle": {
|
||||||
|
"versions": ["11.2.0.1", "12.1.0.1"],
|
||||||
|
"apex": {
|
||||||
|
"versions": ["5.1.4"],
|
||||||
|
"plugin": {
|
||||||
|
"internalName": "NET.GOBRECHTS.D3.FORCE",
|
||||||
|
"type": "region",
|
||||||
|
"demo": "https://apex.oracle.com/pls/apex/f?p=18290:1",
|
||||||
|
"previewImage": "https://raw.githubusercontent.com/ogobrecht/d3-force-apex-plugin/master/preview.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,208 @@
|
|||||||
|
.net_gobrechts_d3_force,
|
||||||
|
.net_gobrechts_d3_force_customize,
|
||||||
|
.net_gobrechts_d3_force_customize td,
|
||||||
|
.net_gobrechts_d3_force_tooltip {
|
||||||
|
box-sizing: content-box;
|
||||||
|
font-family: Arial, Helvetica, Sans Serif;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: normal;
|
||||||
|
background-color: #fff
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force.border {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force circle.highlighted {
|
||||||
|
stroke: #555;
|
||||||
|
stroke-width: 2px;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force circle.selected {
|
||||||
|
stroke: #555;
|
||||||
|
stroke-width: 4px;
|
||||||
|
stroke-dasharray: 4 2;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.linkLabel {
|
||||||
|
fill: #bbb;
|
||||||
|
font-size: 8px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.label,
|
||||||
|
.net_gobrechts_d3_force text.labelCircular {
|
||||||
|
fill: black;
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.label,
|
||||||
|
.net_gobrechts_d3_force text.linkLabel {
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.highlighted {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.link {
|
||||||
|
font-size: 12px;
|
||||||
|
fill: #268bd2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.link,
|
||||||
|
.net_gobrechts_d3_force path.link {
|
||||||
|
fill: none;
|
||||||
|
stroke: #bbb;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
stroke-opacity: 0.8;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.dotted,
|
||||||
|
.net_gobrechts_d3_force path.dotted {
|
||||||
|
stroke-dasharray: .01 3;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.dashed,
|
||||||
|
.net_gobrechts_d3_force path.dashed {
|
||||||
|
stroke-dasharray: 4 2;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.highlighted,
|
||||||
|
.net_gobrechts_d3_force path.highlighted {
|
||||||
|
stroke: white !important;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force marker.normal {
|
||||||
|
stroke: none;
|
||||||
|
fill: #bbb;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force marker.highlighted {
|
||||||
|
stroke: none;
|
||||||
|
fill: #555;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .graphOverlay,
|
||||||
|
.net_gobrechts_d3_force .graphOverlaySizeHelper {
|
||||||
|
fill: none;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso path {
|
||||||
|
stroke: #505050;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .drawn {
|
||||||
|
fill-opacity: 0.05 ;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .loop_close {
|
||||||
|
fill: none;
|
||||||
|
stroke-dasharray: 4,4;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .origin {
|
||||||
|
fill: #3399FF;
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .loading rect {
|
||||||
|
fill: black;
|
||||||
|
fill-opacity: 0.2;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .loading text {
|
||||||
|
fill: white;
|
||||||
|
font-size: 36px;
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_tooltip {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: silver;
|
||||||
|
opacity: 0.9;
|
||||||
|
width: 150px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 100000;
|
||||||
|
pointer-events: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
background-color:white;
|
||||||
|
box-shadow: 1px 1px 6px #666;
|
||||||
|
z-index: 200000;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .drag {
|
||||||
|
border: 1px dashed silver;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: block;
|
||||||
|
cursor: move;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 24px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .title {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
border: none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize tr.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize td {
|
||||||
|
padding: 1px;
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .warning {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize input,
|
||||||
|
.net_gobrechts_d3_force_customize select,
|
||||||
|
.net_gobrechts_d3_force_customize textarea,
|
||||||
|
.net_gobrechts_d3_force_customize a {
|
||||||
|
border: 1px solid silver;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize a {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
color: #268bd2;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize input:focus,
|
||||||
|
.net_gobrechts_d3_force_customize select:focus,
|
||||||
|
.net_gobrechts_d3_force_customize textarea:focus,
|
||||||
|
.net_gobrechts_d3_force_customize a:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border: 1px solid #268bd2 !important;
|
||||||
|
background-color: #ffff99 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize textarea {
|
||||||
|
font-size: 10px !important;
|
||||||
|
padding: 2px;
|
||||||
|
width: 160px;
|
||||||
|
height: 85px;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>D3 Force Network Chart</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="font-family:Arial, Helvetica, sans-serif">
|
||||||
|
<h2>D3 Force Network Chart 3.1.0 Example Page</h2>
|
||||||
|
<p>To play around with the graph options click the "Customize Me" link.</p>
|
||||||
|
<p>For more informations also see <a href="https://ogobrecht.github.io/d3-force-apex-plugin/" target="_blank">the
|
||||||
|
docs</a>. <button onclick="example.useDomParentWidth((example.useDomParentWidth()?false:true))">Toggle option
|
||||||
|
useDomParentWidth</button></p>
|
||||||
|
<div id="example"></div>
|
||||||
|
<p>The customization wizard, which opens by clicking the link "Customize me", is not intended to used by end users
|
||||||
|
(and also not on small devices) - it is a convenience helper for developers to better understand the implications
|
||||||
|
of the different graph options.</p>
|
||||||
|
<p>The link is only shown, when the debug mode is switched on, which is the case here for demonstration purposes. The
|
||||||
|
debug mode writes many informations to the browser console - it should be switched off in a production environment.</p>
|
||||||
|
<link href="d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="lib/resize-observer-polyfill/ResizeObserver-1.5.0.min.js"></script>
|
||||||
|
<script src="lib/d3/d3-3.5.6.min.js"></script>
|
||||||
|
<script src="d3-force-3.1.0.min.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
example = netGobrechtsD3Force('example')
|
||||||
|
.width(600)
|
||||||
|
.height(400)
|
||||||
|
//.useDomParentWidth(true) //for responsive layout
|
||||||
|
.zoomMode(true)
|
||||||
|
.lassoMode(true)
|
||||||
|
.wrapLabels(true)
|
||||||
|
.debug(true) //to enable the customization wizard
|
||||||
|
.render(); //sample data is provided when called without data
|
||||||
|
//see also https://ogobrecht.github.io/d3-force-apex-plugin/tutorial-1-getting-started.html
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
FROM: https://github.com/d3/d3/blob/master/LICENSE
|
||||||
|
|
||||||
|
Copyright 2010-2017 Mike Bostock
|
||||||
|
All rights reserved.
|
||||||
|
|
||||||
|
Redistribution and use in source and binary forms, with or without modification,
|
||||||
|
are permitted provided that the following conditions are met:
|
||||||
|
|
||||||
|
* Redistributions of source code must retain the above copyright notice, this
|
||||||
|
list of conditions and the following disclaimer.
|
||||||
|
|
||||||
|
* Redistributions in binary form must reproduce the above copyright notice,
|
||||||
|
this list of conditions and the following disclaimer in the documentation
|
||||||
|
and/or other materials provided with the distribution.
|
||||||
|
|
||||||
|
* Neither the name of the author nor the names of contributors may be used to
|
||||||
|
endorse or promote products derived from this software without specific prior
|
||||||
|
written permission.
|
||||||
|
|
||||||
|
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||||
|
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||||
|
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||||
|
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
||||||
|
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||||
|
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||||
|
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
||||||
|
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||||
|
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,23 @@
|
|||||||
|
FROM: https://github.com/tinker10/D3-Labeler/blob/master/LICENSE
|
||||||
|
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2013 Evan Wang
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
Source Code: https://github.com/d3/d3-plugins/blob/master/lasso/lasso.js
|
||||||
|
|
||||||
|
Copyright 2010-2017 Mike Bostock
|
||||||
|
All rights reserved.
|
||||||
|
|
||||||
|
Redistribution and use in source and binary forms, with or without modification,
|
||||||
|
are permitted provided that the following conditions are met:
|
||||||
|
|
||||||
|
* Redistributions of source code must retain the above copyright notice, this
|
||||||
|
list of conditions and the following disclaimer.
|
||||||
|
|
||||||
|
* Redistributions in binary form must reproduce the above copyright notice,
|
||||||
|
this list of conditions and the following disclaimer in the documentation
|
||||||
|
and/or other materials provided with the distribution.
|
||||||
|
|
||||||
|
* Neither the name of the author nor the names of contributors may be used to
|
||||||
|
endorse or promote products derived from this software without specific prior
|
||||||
|
written permission.
|
||||||
|
|
||||||
|
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||||
|
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||||
|
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||||
|
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
||||||
|
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||||
|
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||||
|
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
||||||
|
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||||
|
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
FROM: https://github.com/que-etc/resize-observer-polyfill/blob/master/LICENSE
|
||||||
|
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2016 Denis Rul
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,208 @@
|
|||||||
|
.net_gobrechts_d3_force,
|
||||||
|
.net_gobrechts_d3_force_customize,
|
||||||
|
.net_gobrechts_d3_force_customize td,
|
||||||
|
.net_gobrechts_d3_force_tooltip {
|
||||||
|
box-sizing: content-box;
|
||||||
|
font-family: Arial, Helvetica, Sans Serif;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: normal;
|
||||||
|
background-color: #fff
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force.border {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force circle.highlighted {
|
||||||
|
stroke: #555;
|
||||||
|
stroke-width: 2px;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force circle.selected {
|
||||||
|
stroke: #555;
|
||||||
|
stroke-width: 4px;
|
||||||
|
stroke-dasharray: 4 2;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.linkLabel {
|
||||||
|
fill: #bbb;
|
||||||
|
font-size: 8px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.label,
|
||||||
|
.net_gobrechts_d3_force text.labelCircular {
|
||||||
|
fill: black;
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.label,
|
||||||
|
.net_gobrechts_d3_force text.linkLabel {
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.highlighted {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.link {
|
||||||
|
font-size: 12px;
|
||||||
|
fill: #268bd2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.link,
|
||||||
|
.net_gobrechts_d3_force path.link {
|
||||||
|
fill: none;
|
||||||
|
stroke: #bbb;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
stroke-opacity: 0.8;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.dotted,
|
||||||
|
.net_gobrechts_d3_force path.dotted {
|
||||||
|
stroke-dasharray: .01 3;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.dashed,
|
||||||
|
.net_gobrechts_d3_force path.dashed {
|
||||||
|
stroke-dasharray: 4 2;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.highlighted,
|
||||||
|
.net_gobrechts_d3_force path.highlighted {
|
||||||
|
stroke: #555 !important;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force marker.normal {
|
||||||
|
stroke: none;
|
||||||
|
fill: #bbb;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force marker.highlighted {
|
||||||
|
stroke: none;
|
||||||
|
fill: #555;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .graphOverlay,
|
||||||
|
.net_gobrechts_d3_force .graphOverlaySizeHelper {
|
||||||
|
fill: none;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso path {
|
||||||
|
stroke: #505050;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .drawn {
|
||||||
|
fill-opacity: 0.05 ;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .loop_close {
|
||||||
|
fill: none;
|
||||||
|
stroke-dasharray: 4,4;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .origin {
|
||||||
|
fill: #3399FF;
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .loading rect {
|
||||||
|
fill: black;
|
||||||
|
fill-opacity: 0.2;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .loading text {
|
||||||
|
fill: white;
|
||||||
|
font-size: 36px;
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_tooltip {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: silver;
|
||||||
|
opacity: 0.9;
|
||||||
|
width: 150px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 100000;
|
||||||
|
pointer-events: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
background-color:white;
|
||||||
|
box-shadow: 1px 1px 6px #666;
|
||||||
|
z-index: 200000;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .drag {
|
||||||
|
border: 1px dashed silver;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: block;
|
||||||
|
cursor: move;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 24px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .title {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
border: none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize tr.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize td {
|
||||||
|
padding: 1px;
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .warning {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize input,
|
||||||
|
.net_gobrechts_d3_force_customize select,
|
||||||
|
.net_gobrechts_d3_force_customize textarea,
|
||||||
|
.net_gobrechts_d3_force_customize a {
|
||||||
|
border: 1px solid silver;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize a {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
color: #268bd2;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize input:focus,
|
||||||
|
.net_gobrechts_d3_force_customize select:focus,
|
||||||
|
.net_gobrechts_d3_force_customize textarea:focus,
|
||||||
|
.net_gobrechts_d3_force_customize a:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border: 1px solid #268bd2 !important;
|
||||||
|
background-color: #ffff99 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize textarea {
|
||||||
|
font-size: 10px !important;
|
||||||
|
padding: 2px;
|
||||||
|
width: 160px;
|
||||||
|
height: 85px;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,25 @@
|
|||||||
|
/*global document */
|
||||||
|
(function() {
|
||||||
|
var source = document.getElementsByClassName('prettyprint source linenums');
|
||||||
|
var i = 0;
|
||||||
|
var lineNumber = 0;
|
||||||
|
var lineId;
|
||||||
|
var lines;
|
||||||
|
var totalLines;
|
||||||
|
var anchorHash;
|
||||||
|
|
||||||
|
if (source && source[0]) {
|
||||||
|
anchorHash = document.location.hash.substring(1);
|
||||||
|
lines = source[0].getElementsByTagName('li');
|
||||||
|
totalLines = lines.length;
|
||||||
|
|
||||||
|
for (; i < totalLines; i++) {
|
||||||
|
lineNumber++;
|
||||||
|
lineId = 'line' + lineNumber;
|
||||||
|
lines[i].id = lineId;
|
||||||
|
if (lineId === anchorHash) {
|
||||||
|
lines[i].className += ' selected';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
|
||||||
|
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
|
||||||
|
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
|
||||||
|
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
|
||||||
|
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
|
||||||
|
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
|
||||||
|
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
|
||||||
|
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
|
||||||
|
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
|
||||||
|
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
|
||||||
|
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
|
||||||
|
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
|
||||||
|
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
|
||||||
|
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
|
||||||
|
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
|
||||||
|
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
|
||||||
|
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
|
||||||
|
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
|
||||||
|
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
|
||||||
|
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
|
||||||
|
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
|
||||||
|
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
|
||||||
|
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
|
||||||
|
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
|
||||||
|
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
|
||||||
|
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
|
||||||
|
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
|
||||||
|
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
|
||||||
@ -0,0 +1,692 @@
|
|||||||
|
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500i,500,600,600i|Roboto);
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #4d4e53;
|
||||||
|
background-color: white;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 160%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:active {
|
||||||
|
color: #0095dd;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline
|
||||||
|
}
|
||||||
|
|
||||||
|
p, ul, ol, blockquote {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 48px;
|
||||||
|
margin: 1em 0 .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.page-title {margin-bottom: 10px;font-size: 34px;font-weight: 300;border-bottom: solid 2px #ddd;padding: .5em 0 .5em;margin-top: 0;}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
margin: 1.2em 0 .8em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
/* margin-top: 1em; */
|
||||||
|
/* margin-bottom: 16px; */
|
||||||
|
/* font-weight: bold; */
|
||||||
|
padding: 0;
|
||||||
|
margin: 1em 0 .6em;
|
||||||
|
font-size: 28px;
|
||||||
|
/* border-bottom: 1px solid #eee; */
|
||||||
|
/* padding-bottom: 15px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 1em 0 .2em;
|
||||||
|
color: #4d4e53;
|
||||||
|
/* border-bottom: 1px solid #eee; */
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5, .container-overview .subsection-title {
|
||||||
|
font-size: 120%;
|
||||||
|
/* letter-spacing: -0.01em; */
|
||||||
|
margin: 20px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 100%;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 6px 0 3px 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
tt, code, kbd, samp {
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
background: #f4f4f4;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
display: block;
|
||||||
|
border-left: 4px solid #eee;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-description {
|
||||||
|
font-size: 130%;
|
||||||
|
line-height: 140%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.class-description:empty {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Container **/
|
||||||
|
#main {
|
||||||
|
float: right;
|
||||||
|
min-width: 360px;
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
padding: 0 30px 20px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variation {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature-attributes {
|
||||||
|
font-size: 60%;
|
||||||
|
color: #aaa;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Readme **/
|
||||||
|
|
||||||
|
.readme {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme h1,
|
||||||
|
.readme h2,
|
||||||
|
.readme h3,
|
||||||
|
.readme h4,
|
||||||
|
.readme h5 {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme h2 {
|
||||||
|
font-size: 1.75em;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme h3 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme h4 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme h5 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme ul, .readme ol {
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme pre > code {
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme table {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme table tr {
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme table th,
|
||||||
|
.readme table td {
|
||||||
|
padding: 6px 13px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readme table tr:nth-child(2n) {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Nav **/
|
||||||
|
nav {
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
width: 250px;
|
||||||
|
background: #fff;
|
||||||
|
overflow: auto;
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
/* box-shadow: 0 0 3px rgba(0,0,0,0.1); */
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-heading {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-heading a {
|
||||||
|
color: #888;
|
||||||
|
font-size: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-type {
|
||||||
|
/* margin-left: 5px; */
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0.2em;
|
||||||
|
margin-right: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-function {
|
||||||
|
background: #B3E5FC;
|
||||||
|
color: #0288D1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-class {
|
||||||
|
background: #D1C4E9;
|
||||||
|
color: #4527A0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-member {
|
||||||
|
background: #C8E6C9;
|
||||||
|
color: #388E3C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-module {
|
||||||
|
background: #E1BEE7;
|
||||||
|
color: #7B1FA2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** Footer **/
|
||||||
|
footer {
|
||||||
|
color: hsl(0, 0%, 28%);
|
||||||
|
margin-left: 250px;
|
||||||
|
display: block;
|
||||||
|
padding: 30px;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 90%;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ancestors {
|
||||||
|
color: #999
|
||||||
|
}
|
||||||
|
|
||||||
|
.ancestors a {
|
||||||
|
color: #999 !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.important {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #950B02;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yes-def {
|
||||||
|
text-indent: -1000px
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-signature {
|
||||||
|
color: #aaa
|
||||||
|
}
|
||||||
|
|
||||||
|
.name, .signature {
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
margin-top: 14px;
|
||||||
|
border-left: 2px solid #DDD;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details dt {
|
||||||
|
width: 120px;
|
||||||
|
float: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details dd {
|
||||||
|
margin-left: 70px
|
||||||
|
}
|
||||||
|
|
||||||
|
.details ul {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.details ul {
|
||||||
|
list-style-type: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.details li {
|
||||||
|
margin-left: 30px
|
||||||
|
}
|
||||||
|
|
||||||
|
.details pre.prettyprint {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.details .object-value {
|
||||||
|
padding-top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-caption {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 107%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint {
|
||||||
|
font-size: 13px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.05);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.source {
|
||||||
|
width: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint code {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
display: block;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #4D4E53;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint code:empty:before {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint > code {
|
||||||
|
padding: 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint .linenums code {
|
||||||
|
padding: 0 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint .linenums li:first-of-type code {
|
||||||
|
padding-top: 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint code span.line {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums {
|
||||||
|
padding-left: 70px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums ol {
|
||||||
|
padding-left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums li {
|
||||||
|
border-left: 3px #ddd solid
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums li.selected, .prettyprint.linenums li.selected * {
|
||||||
|
background-color: lightyellow
|
||||||
|
}
|
||||||
|
|
||||||
|
.prettyprint.linenums li * {
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params, .props {
|
||||||
|
border-spacing: 0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
/* margin-left: 15px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.params .name, .props .name, .name code {
|
||||||
|
color: #4D4E53;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td, .params th, .props td, .props th {
|
||||||
|
margin: 0px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 10px;
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td {
|
||||||
|
border-top: 1px solid #eee
|
||||||
|
}
|
||||||
|
|
||||||
|
.params thead tr, .props thead tr {
|
||||||
|
background-color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params .params thead tr, .props .props thead tr {
|
||||||
|
background-color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td.description > p:first-child, .props td.description > p:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td.description > p:last-child, .props td.description > p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl.param-type {
|
||||||
|
/* border-bottom: 1px solid hsl(0, 0%, 87%); */
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-type dt, .param-type dd {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-type dd {
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: #454545
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navicon button */
|
||||||
|
.navicon-button {
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
padding: 2.0625rem 1.5rem;
|
||||||
|
transition: 0.25s;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
.navicon-button .navicon:before, .navicon-button .navicon:after {
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
.navicon-button:hover {
|
||||||
|
transition: 0.5s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
.navicon-button:hover .navicon:before {
|
||||||
|
top: .825rem;
|
||||||
|
}
|
||||||
|
.navicon-button:hover .navicon:after {
|
||||||
|
top: -.825rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* navicon */
|
||||||
|
.navicon {
|
||||||
|
position: relative;
|
||||||
|
width: 2.5em;
|
||||||
|
height: .3125rem;
|
||||||
|
background: #000;
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 2.5rem;
|
||||||
|
}
|
||||||
|
.navicon:before, .navicon:after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
height: .3125rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
background: #000;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
transition: 0.3s 0.25s;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.navicon:before {
|
||||||
|
top: .625rem;
|
||||||
|
}
|
||||||
|
.navicon:after {
|
||||||
|
top: -.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* open */
|
||||||
|
.nav-trigger:checked + label:not(.steps) .navicon:before,
|
||||||
|
.nav-trigger:checked + label:not(.steps) .navicon:after {
|
||||||
|
top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked + label .navicon:before,
|
||||||
|
.nav-trigger:checked + label .navicon:after {
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Minus */
|
||||||
|
.nav-trigger:checked + label {
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ã and + */
|
||||||
|
.nav-trigger:checked + label.plus .navicon,
|
||||||
|
.nav-trigger:checked + label.x .navicon {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked + label.plus .navicon:before,
|
||||||
|
.nav-trigger:checked + label.x .navicon:before {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked + label.plus .navicon:after,
|
||||||
|
.nav-trigger:checked + label.x .navicon:after {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked + label.plus {
|
||||||
|
transform: scale(0.75) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked ~ nav {
|
||||||
|
left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked ~ .overlay {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: hsla(0, 0%, 0%, 0.5);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-method {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 320px) and (max-width: 680px) {
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background: #FFF;
|
||||||
|
width: 250px;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: -250px;
|
||||||
|
z-index: 3;
|
||||||
|
padding: 0 10px;
|
||||||
|
transition: left 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navicon-button {
|
||||||
|
display: inline-block;
|
||||||
|
position: fixed;
|
||||||
|
top: 1.5em;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main h1.page-title {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main section {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only print {
|
||||||
|
nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/* JSDoc prettify.js theme */
|
||||||
|
|
||||||
|
/* plain text */
|
||||||
|
.pln {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* string content */
|
||||||
|
.str {
|
||||||
|
color: hsl(104, 100%, 24%);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a keyword */
|
||||||
|
.kwd {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a comment */
|
||||||
|
.com {
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a type name */
|
||||||
|
.typ {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a literal value */
|
||||||
|
.lit {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* punctuation */
|
||||||
|
.pun {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lisp open bracket */
|
||||||
|
.opn {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lisp close bracket */
|
||||||
|
.clo {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a markup tag name */
|
||||||
|
.tag {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a markup attribute name */
|
||||||
|
.atn {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a markup attribute value */
|
||||||
|
.atv {
|
||||||
|
color: #006400;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a declaration */
|
||||||
|
.dec {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a variable name */
|
||||||
|
.var {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a function name */
|
||||||
|
.fun {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specify class=linenums on a pre to get line numbering */
|
||||||
|
ol.linenums {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
/* Tomorrow Theme */
|
||||||
|
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||||
|
/* Pretty printing styles. Used with prettify.js. */
|
||||||
|
/* SPAN elements with the classes below are added by prettyprint. */
|
||||||
|
/* plain text */
|
||||||
|
.pln {
|
||||||
|
color: #4d4d4c; }
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
/* string content */
|
||||||
|
.str {
|
||||||
|
color: hsl(104, 100%, 24%); }
|
||||||
|
|
||||||
|
/* a keyword */
|
||||||
|
.kwd {
|
||||||
|
color: hsl(240, 100%, 50%); }
|
||||||
|
|
||||||
|
/* a comment */
|
||||||
|
.com {
|
||||||
|
color: hsl(0, 0%, 60%); }
|
||||||
|
|
||||||
|
/* a type name */
|
||||||
|
.typ {
|
||||||
|
color: hsl(240, 100%, 32%); }
|
||||||
|
|
||||||
|
/* a literal value */
|
||||||
|
.lit {
|
||||||
|
color: hsl(240, 100%, 40%); }
|
||||||
|
|
||||||
|
/* punctuation */
|
||||||
|
.pun {
|
||||||
|
color: #000000; }
|
||||||
|
|
||||||
|
/* lisp open bracket */
|
||||||
|
.opn {
|
||||||
|
color: #000000; }
|
||||||
|
|
||||||
|
/* lisp close bracket */
|
||||||
|
.clo {
|
||||||
|
color: #000000; }
|
||||||
|
|
||||||
|
/* a markup tag name */
|
||||||
|
.tag {
|
||||||
|
color: #c82829; }
|
||||||
|
|
||||||
|
/* a markup attribute name */
|
||||||
|
.atn {
|
||||||
|
color: #f5871f; }
|
||||||
|
|
||||||
|
/* a markup attribute value */
|
||||||
|
.atv {
|
||||||
|
color: #3e999f; }
|
||||||
|
|
||||||
|
/* a declaration */
|
||||||
|
.dec {
|
||||||
|
color: #f5871f; }
|
||||||
|
|
||||||
|
/* a variable name */
|
||||||
|
.var {
|
||||||
|
color: #c82829; }
|
||||||
|
|
||||||
|
/* a function name */
|
||||||
|
.fun {
|
||||||
|
color: #4271ae; } }
|
||||||
|
/* Use higher contrast and text-weight for printable form. */
|
||||||
|
@media print, projection {
|
||||||
|
.str {
|
||||||
|
color: #060; }
|
||||||
|
|
||||||
|
.kwd {
|
||||||
|
color: #006;
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.com {
|
||||||
|
color: #600;
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
.typ {
|
||||||
|
color: #404;
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.lit {
|
||||||
|
color: #044; }
|
||||||
|
|
||||||
|
.pun, .opn, .clo {
|
||||||
|
color: #440; }
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: #006;
|
||||||
|
font-weight: bold; }
|
||||||
|
|
||||||
|
.atn {
|
||||||
|
color: #404; }
|
||||||
|
|
||||||
|
.atv {
|
||||||
|
color: #060; } }
|
||||||
|
/* Style */
|
||||||
|
/*
|
||||||
|
pre.prettyprint {
|
||||||
|
background: white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px; }
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Specify class=linenums on a pre to get line numbering */
|
||||||
|
ol.linenums {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
|
/* IE indents via margin-left */
|
||||||
|
li.L0,
|
||||||
|
li.L1,
|
||||||
|
li.L2,
|
||||||
|
li.L3,
|
||||||
|
li.L4,
|
||||||
|
li.L5,
|
||||||
|
li.L6,
|
||||||
|
li.L7,
|
||||||
|
li.L8,
|
||||||
|
li.L9 {
|
||||||
|
/* */ }
|
||||||
|
|
||||||
|
/* Alternate shading for lines */
|
||||||
|
li.L1,
|
||||||
|
li.L3,
|
||||||
|
li.L5,
|
||||||
|
li.L7,
|
||||||
|
li.L9 {
|
||||||
|
/* */ }
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "d3-force-apex-plugin",
|
||||||
|
"version": "0.0.0-ignored",
|
||||||
|
"private": true,
|
||||||
|
"devDependencies": {
|
||||||
|
"eslint": "^5.6.1",
|
||||||
|
"eslint-config-standard": "^12.0.0",
|
||||||
|
"eslint-plugin-import": "^2.14.0",
|
||||||
|
"eslint-plugin-node": "^7.0.1",
|
||||||
|
"eslint-plugin-promise": "^4.0.1",
|
||||||
|
"eslint-plugin-standard": "^4.0.0",
|
||||||
|
"grunt": "^1.0.3",
|
||||||
|
"grunt-contrib-clean": "^2.0.0",
|
||||||
|
"grunt-contrib-copy": "^1.0.0",
|
||||||
|
"grunt-contrib-jshint": "^2.0.0",
|
||||||
|
"grunt-contrib-uglify": "^4.0.0",
|
||||||
|
"grunt-contrib-watch": "^1.1.0",
|
||||||
|
"grunt-jsdoc": "^2.3.0",
|
||||||
|
"grunt-notify": "^0.4.1",
|
||||||
|
"ink-docstrap": "^1.3.2",
|
||||||
|
"jsdoc": "^3.5.5",
|
||||||
|
"jshint": "^2.9.6",
|
||||||
|
"minami": "^1.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015-{{CURRENT-YEAR}} Ottmar Gobrecht
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@ -0,0 +1,220 @@
|
|||||||
|
FUNCTION d3_force__render( p_region IN apex_plugin.t_region
|
||||||
|
, p_plugin IN apex_plugin.t_plugin
|
||||||
|
, p_is_printer_friendly IN BOOLEAN )
|
||||||
|
RETURN apex_plugin.t_region_render_result
|
||||||
|
IS
|
||||||
|
v_configuration_object apex_application_page_regions.attribute_02%TYPE := p_region.attribute_02;
|
||||||
|
v_custom_styles apex_application_page_regions.attribute_03%TYPE := p_region.attribute_03;
|
||||||
|
v_region_static_id VARCHAR2( 100 );
|
||||||
|
BEGIN
|
||||||
|
v_region_static_id := apex_plugin_util.escape( p_region.static_id, TRUE );
|
||||||
|
|
||||||
|
apex_css.add_file( p_name => 'd3-force-'
|
||||||
|
, p_directory => p_plugin.file_prefix
|
||||||
|
, p_version => '3.1.0' );
|
||||||
|
|
||||||
|
apex_javascript.add_library( p_name => 'ResizeObserver-'
|
||||||
|
, p_directory => p_plugin.file_prefix
|
||||||
|
, p_version => '1.5.0'
|
||||||
|
, p_check_to_add_minified => TRUE );
|
||||||
|
|
||||||
|
apex_javascript.add_library( p_name => 'd3-'
|
||||||
|
, p_directory => p_plugin.file_prefix
|
||||||
|
, p_version => '3.5.6'
|
||||||
|
, p_check_to_add_minified => TRUE );
|
||||||
|
|
||||||
|
apex_javascript.add_library( p_name => 'd3-force-'
|
||||||
|
, p_directory => p_plugin.file_prefix
|
||||||
|
, p_version => '3.1.0'
|
||||||
|
, p_check_to_add_minified => TRUE );
|
||||||
|
|
||||||
|
HTP.p( CASE
|
||||||
|
WHEN v_custom_styles IS NOT NULL THEN
|
||||||
|
'<style>' || v_custom_styles || '</style>' || CHR( 10 )
|
||||||
|
END
|
||||||
|
|| '<svg></svg>'
|
||||||
|
|| CHR( 10 ) );
|
||||||
|
|
||||||
|
apex_javascript.add_onload_code( --> initialize chart function
|
||||||
|
'd3_force_'
|
||||||
|
|| v_region_static_id --> we need to use a global var - that is the reason to NOT use the var keyword
|
||||||
|
|| ' = netGobrechtsD3Force('
|
||||||
|
--> domContainerId:
|
||||||
|
|| apex_javascript.add_value( v_region_static_id, TRUE )
|
||||||
|
--> options:
|
||||||
|
|| CASE
|
||||||
|
WHEN v_configuration_object IS NOT NULL THEN
|
||||||
|
v_configuration_object
|
||||||
|
ELSE
|
||||||
|
'null'
|
||||||
|
END
|
||||||
|
|| ', '
|
||||||
|
--> apexPluginId:
|
||||||
|
|| apex_javascript.add_value( apex_plugin.get_ajax_identifier
|
||||||
|
, TRUE )
|
||||||
|
--> apexPageItemsToSubmit:
|
||||||
|
|| apex_javascript.add_value( p_region.ajax_items_to_submit
|
||||||
|
, FALSE )
|
||||||
|
|| ')'
|
||||||
|
|| CASE WHEN v( 'DEBUG' ) = 'YES' THEN '.debug(true)' END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_09 IS NOT NULL THEN
|
||||||
|
'.positions(' || p_region.attribute_09 || ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_04 IS NOT NULL THEN
|
||||||
|
'.onNodeClickFunction('
|
||||||
|
|| p_region.attribute_04
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_05 IS NOT NULL THEN
|
||||||
|
'.onNodeDblclickFunction('
|
||||||
|
|| p_region.attribute_05
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_06 IS NOT NULL THEN
|
||||||
|
'.onNodeContextmenuFunction('
|
||||||
|
|| p_region.attribute_06
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_12 IS NOT NULL THEN
|
||||||
|
'.onLinkClickFunction('
|
||||||
|
|| p_region.attribute_12
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_07 IS NOT NULL THEN
|
||||||
|
'.onNodeMouseenterFunction('
|
||||||
|
|| p_region.attribute_07
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_08 IS NOT NULL THEN
|
||||||
|
'.onNodeMouseleaveFunction('
|
||||||
|
|| p_region.attribute_08
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_10 IS NOT NULL THEN
|
||||||
|
'.onLassoStartFunction('
|
||||||
|
|| p_region.attribute_10
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_11 IS NOT NULL THEN
|
||||||
|
'.onLassoEndFunction('
|
||||||
|
|| p_region.attribute_11
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_13 IS NOT NULL THEN
|
||||||
|
'.onForceStartFunction('
|
||||||
|
|| p_region.attribute_13
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_14 IS NOT NULL THEN
|
||||||
|
'.onForceEndFunction('
|
||||||
|
|| p_region.attribute_14
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_15 IS NOT NULL THEN
|
||||||
|
'.onRenderEndFunction('
|
||||||
|
|| p_region.attribute_15
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
|| CASE
|
||||||
|
WHEN p_region.attribute_16 IS NOT NULL THEN
|
||||||
|
'.onResizeFunction('
|
||||||
|
|| p_region.attribute_16
|
||||||
|
|| ')'
|
||||||
|
END
|
||||||
|
--> start the visualization
|
||||||
|
|| '.start();' );
|
||||||
|
RETURN NULL;
|
||||||
|
END d3_force__render;
|
||||||
|
|
||||||
|
FUNCTION d3_force__ajax( p_region IN apex_plugin.t_region, p_plugin IN apex_plugin.t_plugin )
|
||||||
|
RETURN apex_plugin.t_region_ajax_result
|
||||||
|
IS
|
||||||
|
v_clob CLOB;
|
||||||
|
v_binds DBMS_SQL.varchar2_table;
|
||||||
|
v_cur INTEGER;
|
||||||
|
v_ret INTEGER;
|
||||||
|
BEGIN
|
||||||
|
IF p_region.source IS NOT NULL THEN
|
||||||
|
v_binds := wwv_flow_utilities.get_binds( p_region.source );
|
||||||
|
v_cur := DBMS_SQL.open_cursor;
|
||||||
|
DBMS_SQL.parse( c => v_cur, statement => REGEXP_REPLACE(p_region.source,';\s*$',''), language_flag => DBMS_SQL.native );
|
||||||
|
|
||||||
|
IF v_binds.COUNT > 0 THEN
|
||||||
|
FOR i IN v_binds.FIRST .. v_binds.LAST LOOP
|
||||||
|
DBMS_SQL.bind_variable( v_cur
|
||||||
|
, v_binds( i )
|
||||||
|
, APEX_UTIL.get_session_state( SUBSTR( v_binds( i ), 2 ) ) );
|
||||||
|
END LOOP;
|
||||||
|
END IF;
|
||||||
|
|
||||||
|
DBMS_SQL.define_column( c => v_cur, position => 1, column => v_clob );
|
||||||
|
v_ret := DBMS_SQL.execute( c => v_cur );
|
||||||
|
|
||||||
|
WHILE DBMS_SQL.fetch_rows( v_cur ) > 0 LOOP
|
||||||
|
DBMS_SQL.COLUMN_VALUE( v_cur, 1, v_clob );
|
||||||
|
END LOOP;
|
||||||
|
|
||||||
|
DBMS_SQL.close_cursor( v_cur );
|
||||||
|
|
||||||
|
IF sys.DBMS_LOB.getlength( v_clob ) > 0 THEN
|
||||||
|
DECLARE
|
||||||
|
v_len PLS_INTEGER;
|
||||||
|
v_pos PLS_INTEGER := 1;
|
||||||
|
v_amo PLS_INTEGER := 4000;
|
||||||
|
v_chu VARCHAR2( 32767 );
|
||||||
|
BEGIN
|
||||||
|
v_len := DBMS_LOB.getlength( v_clob );
|
||||||
|
|
||||||
|
WHILE v_pos <= v_len LOOP
|
||||||
|
v_amo := LEAST( v_amo, v_len - ( v_pos - 1 ) );
|
||||||
|
v_chu := DBMS_LOB.SUBSTR( v_clob, v_amo, v_pos );
|
||||||
|
v_pos := v_pos + v_amo;
|
||||||
|
HTP.prn( v_chu );
|
||||||
|
END LOOP;
|
||||||
|
END;
|
||||||
|
ELSE
|
||||||
|
HTP.prn( 'query_returned_no_data' ); --> prn prints without newline
|
||||||
|
END IF;
|
||||||
|
ELSE
|
||||||
|
HTP.prn( 'no_query_defined' );
|
||||||
|
END IF;
|
||||||
|
|
||||||
|
--> Free the temp LOB, if necessary
|
||||||
|
BEGIN
|
||||||
|
DBMS_LOB.freetemporary( v_clob );
|
||||||
|
EXCEPTION
|
||||||
|
WHEN OTHERS THEN
|
||||||
|
NULL;
|
||||||
|
END;
|
||||||
|
|
||||||
|
RETURN NULL;
|
||||||
|
EXCEPTION
|
||||||
|
WHEN OTHERS THEN
|
||||||
|
--> Close the cursor, if open
|
||||||
|
BEGIN
|
||||||
|
IF v_cur IS NOT NULL
|
||||||
|
AND DBMS_SQL.is_open( v_cur ) THEN
|
||||||
|
DBMS_SQL.close_cursor( v_cur );
|
||||||
|
END IF;
|
||||||
|
EXCEPTION
|
||||||
|
WHEN OTHERS THEN
|
||||||
|
NULL;
|
||||||
|
END;
|
||||||
|
|
||||||
|
apex_debug.MESSAGE( SQLERRM );
|
||||||
|
--> Write error back to the Browser
|
||||||
|
HTP.prn( SQLERRM );
|
||||||
|
RETURN NULL;
|
||||||
|
END d3_force__ajax;
|
||||||
@ -0,0 +1,208 @@
|
|||||||
|
.net_gobrechts_d3_force,
|
||||||
|
.net_gobrechts_d3_force_customize,
|
||||||
|
.net_gobrechts_d3_force_customize td,
|
||||||
|
.net_gobrechts_d3_force_tooltip {
|
||||||
|
box-sizing: content-box;
|
||||||
|
font-family: Arial, Helvetica, Sans Serif;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: normal;
|
||||||
|
background-color: #fff
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force.border {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force circle.highlighted {
|
||||||
|
stroke: #555;
|
||||||
|
stroke-width: 2px;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force circle.selected {
|
||||||
|
stroke: #555;
|
||||||
|
stroke-width: 4px;
|
||||||
|
stroke-dasharray: 4 2;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.linkLabel {
|
||||||
|
fill: #bbb;
|
||||||
|
font-size: 8px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.label,
|
||||||
|
.net_gobrechts_d3_force text.labelCircular {
|
||||||
|
fill: black;
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.label,
|
||||||
|
.net_gobrechts_d3_force text.linkLabel {
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.highlighted {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force text.link {
|
||||||
|
font-size: 12px;
|
||||||
|
fill: #268bd2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.link,
|
||||||
|
.net_gobrechts_d3_force path.link {
|
||||||
|
fill: none;
|
||||||
|
stroke: #bbb;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
stroke-opacity: 0.8;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.dotted,
|
||||||
|
.net_gobrechts_d3_force path.dotted {
|
||||||
|
stroke-dasharray: .01 3;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.dashed,
|
||||||
|
.net_gobrechts_d3_force path.dashed {
|
||||||
|
stroke-dasharray: 4 2;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force line.highlighted,
|
||||||
|
.net_gobrechts_d3_force path.highlighted {
|
||||||
|
stroke: white !important;
|
||||||
|
stroke-opacity: 1.0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force marker.normal {
|
||||||
|
stroke: none;
|
||||||
|
fill: #bbb;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force marker.highlighted {
|
||||||
|
stroke: none;
|
||||||
|
fill: #555;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .graphOverlay,
|
||||||
|
.net_gobrechts_d3_force .graphOverlaySizeHelper {
|
||||||
|
fill: none;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso path {
|
||||||
|
stroke: #505050;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .drawn {
|
||||||
|
fill-opacity: 0.05 ;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .loop_close {
|
||||||
|
fill: none;
|
||||||
|
stroke-dasharray: 4,4;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .lasso .origin {
|
||||||
|
fill: #3399FF;
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .loading rect {
|
||||||
|
fill: black;
|
||||||
|
fill-opacity: 0.2;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force .loading text {
|
||||||
|
fill: white;
|
||||||
|
font-size: 36px;
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_tooltip {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: silver;
|
||||||
|
opacity: 0.9;
|
||||||
|
width: 150px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 100000;
|
||||||
|
pointer-events: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
background-color:white;
|
||||||
|
box-shadow: 1px 1px 6px #666;
|
||||||
|
z-index: 200000;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .drag {
|
||||||
|
border: 1px dashed silver;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: block;
|
||||||
|
cursor: move;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 24px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .title {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
border: none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize tr.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize td {
|
||||||
|
padding: 1px;
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize .warning {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize input,
|
||||||
|
.net_gobrechts_d3_force_customize select,
|
||||||
|
.net_gobrechts_d3_force_customize textarea,
|
||||||
|
.net_gobrechts_d3_force_customize a {
|
||||||
|
border: 1px solid silver;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize a {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
color: #268bd2;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize input:focus,
|
||||||
|
.net_gobrechts_d3_force_customize select:focus,
|
||||||
|
.net_gobrechts_d3_force_customize textarea:focus,
|
||||||
|
.net_gobrechts_d3_force_customize a:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border: 1px solid #268bd2 !important;
|
||||||
|
background-color: #ffff99 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.net_gobrechts_d3_force_customize textarea {
|
||||||
|
font-size: 10px !important;
|
||||||
|
padding: 2px;
|
||||||
|
width: 160px;
|
||||||
|
height: 85px;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>D3 Force Network Chart</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="font-family:Arial, Helvetica, sans-serif">
|
||||||
|
<h2>D3 Force Network Chart x.x.x Example Page</h2>
|
||||||
|
<p>To play around with the graph options click the "Customize Me" link.</p>
|
||||||
|
<p>For more informations also see <a href="https://ogobrecht.github.io/d3-force-apex-plugin/" target="_blank">the
|
||||||
|
docs</a>. <button onclick="example.useDomParentWidth((example.useDomParentWidth()?false:true))">Toggle option
|
||||||
|
useDomParentWidth</button></p>
|
||||||
|
<div id="example"></div>
|
||||||
|
<p>The customization wizard, which opens by clicking the link "Customize me", is not intended to used by end users
|
||||||
|
(and also not on small devices) - it is a convenience helper for developers to better understand the implications
|
||||||
|
of the different graph options.</p>
|
||||||
|
<p>The link is only shown, when the debug mode is switched on, which is the case here for demonstration purposes. The
|
||||||
|
debug mode writes many informations to the browser console - it should be switched off in a production environment.</p>
|
||||||
|
<link href="d3-force-x.x.x.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="lib/resize-observer-polyfill/ResizeObserver-1.5.0.min.js"></script>
|
||||||
|
<script src="lib/d3/d3-3.5.6.min.js"></script>
|
||||||
|
<script src="d3-force-x.x.x.min.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
example = netGobrechtsD3Force('example')
|
||||||
|
.width(600)
|
||||||
|
.height(400)
|
||||||
|
//.useDomParentWidth(true) //for responsive layout
|
||||||
|
.zoomMode(true)
|
||||||
|
.lassoMode(true)
|
||||||
|
.wrapLabels(true)
|
||||||
|
.debug(true) //to enable the customization wizard
|
||||||
|
.render(); //sample data is provided when called without data
|
||||||
|
//see also https://ogobrecht.github.io/d3-force-apex-plugin/tutorial-1-getting-started.html
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
{{EXAMPLE-GRAPH}}
|
||||||
|
|
||||||
|
The graph above was started with this code:
|
||||||
|
```html
|
||||||
|
{{EXAMPLE-GRAPH-CODE}}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
|
||||||
|
### APEX
|
||||||
|
|
||||||
|
- Download the [latest version][zip]
|
||||||
|
- Install the plugin by importing the sql file in the folder `apex-plugin`
|
||||||
|
|
||||||
|
|
||||||
|
### Any HTML page
|
||||||
|
|
||||||
|
- Download the [latest version][zip]
|
||||||
|
- See `dist/example.html`
|
||||||
|
|
||||||
|
[zip]: https://github.com/ogobrecht/d3-force-apex-plugin/releases/latest
|
||||||
|
|
||||||
|
|
||||||
|
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 `d3_force_YOUR_REGION_STATIC_ID`. You can then interact with the graph - in the example we inspect the graphs current variables:
|
||||||
|
|
||||||
|
```js
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
||||||
|
## Providing Data
|
||||||
|
|
||||||
|
You can provide data to the [render](./module-API.html#.render) (or [start](./module-API.html#.start) ) function. This data can be a JSON object, a JSON string or a XML string. Below the call for the graph variable `example` with the graph method `render` and the data for two nodes and links.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Please have also a look at the [possible node and link attributes](./tutorial-2-node-and-link-attributes.html)
|
||||||
|
|
||||||
|
```js
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
You can export the current graph data as a JSON object at every time with the [data](./module-API.html#.data) method:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//JSON object
|
||||||
|
example.data();
|
||||||
|
|
||||||
|
//stringified JSON object
|
||||||
|
JSON.stringify(example.data());
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Configure The Graph
|
||||||
|
|
||||||
|
There are two ways to configure the graph:
|
||||||
|
|
||||||
|
1. Provide a configuration object to the graph function on initialisation
|
||||||
|
2. Use API methods before starting the graph or also on runtime
|
||||||
|
|
||||||
|
### Configuration Object
|
||||||
|
|
||||||
|
```js
|
||||||
|
var example = netGobrechtsD3Force(
|
||||||
|
'domContainerToAppendTheGraph',
|
||||||
|
{"width":"700", "height":"500"}
|
||||||
|
)
|
||||||
|
.render({"data":{
|
||||||
|
"nodes":[{...}, {...}],
|
||||||
|
"links":[{...}, {...}]
|
||||||
|
}});
|
||||||
|
```
|
||||||
|
|
||||||
|
### API Methods
|
||||||
|
|
||||||
|
```js
|
||||||
|
var example = netGobrechtsD3Force(
|
||||||
|
'domContainerToAppendTheGraph'
|
||||||
|
)
|
||||||
|
.width(700)
|
||||||
|
.height(500)
|
||||||
|
.render({"data":{
|
||||||
|
"nodes":[{...}, {...}],
|
||||||
|
"links":[{...}, {...}]
|
||||||
|
}});
|
||||||
|
```
|
||||||
|
|
||||||
|
Of course you can combine the two ways:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var example = netGobrechtsD3Force(
|
||||||
|
'domContainerToAppendTheGraph',
|
||||||
|
{"width":"700","height":"500"}
|
||||||
|
)
|
||||||
|
.onNodeClickFunction(
|
||||||
|
function(event, data){
|
||||||
|
console.log(event, data, this);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.debug(true)
|
||||||
|
.render({"data":{
|
||||||
|
"nodes":[{...}, {...}],
|
||||||
|
"links":[{...}, {...}]
|
||||||
|
}});
|
||||||
|
```
|
||||||
|
|
||||||
|
If the DOM container is not existing, then the container is created under the body element.
|
||||||
|
|
||||||
|
### Customization wizard
|
||||||
|
|
||||||
|
You can use the customization wizard to get your configuration object. This
|
||||||
|
wizard has a predefined set of values, e.g. you can choose values between 300
|
||||||
|
and 1200 for the width. If this does not meet your requirements, you can of
|
||||||
|
course change these values in your configuration object. If you do so and use
|
||||||
|
the customization wizard later on, your additional values are appended to the
|
||||||
|
select lists of the wizard.
|
||||||
|
|
||||||
|
There are two ways to start the wizard:
|
||||||
|
|
||||||
|
1. 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): `example.debug(true);`
|
||||||
|
2. Directly start the wizard by setting the customize option to true: `example.customize(true);`
|
||||||
|
|
||||||
|
Each configuration option in the wizard is also implemented as a get and set method:
|
||||||
|
|
||||||
|
```js
|
||||||
|
example.width(); //get the current graph width
|
||||||
|
example.width(700).resume(); //set the current graph width and resume the graph
|
||||||
|
```
|
||||||
|
|
||||||
|
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 [start](./module-API.html#.start), [render](./module-API.html#.render), [resume](./module-API.html#.resume).
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
Node and link attributes are case sensitive:
|
||||||
|
|
||||||
|
|
||||||
|
## Nodes
|
||||||
|
|
||||||
|
- `ID`: mandatory, string, alphanumeric node identifier
|
||||||
|
- `SIZEVALUE`: mandatory, number, numeric base for radius calculation
|
||||||
|
- `COLORVALUE`: mandatory, string, HTML color code or any alphanumeric string - see also [colorScheme](./module-API.html#.colorScheme)
|
||||||
|
- `COLORLABEL`: optional, string, used for legend - if not existing, colorvalue is used instead
|
||||||
|
- `LABEL`: optional, string, label for the node
|
||||||
|
- `LABELCIRCULAR`: optional, boolean, overwrites the global option [labelsCircular](./module-API.html#.labelsCircular)
|
||||||
|
- `INFOSTRING`: optional, string, this string is shown as a tooltip - see also [showTooltips](./module-API.html#.showTooltips) and [tooltipPosition](./module-API.html#.tooltipPosition)
|
||||||
|
- `LINK`: optional, string, URL to open on configurable event - see also [nodeEventToOpenLink](./module-API.html#.nodeEventToOpenLink)
|
||||||
|
- `IMAGE`: optional, string, URL to a background image for a node instead of a fill color
|
||||||
|
- `fixed`: optional, boolean, pin status of a node
|
||||||
|
- `x`: optional, number, x position of fixed (pinned) node
|
||||||
|
- `y`: optional, number, y position of fixed (pinned) node
|
||||||
|
|
||||||
|
Fixed, x and y are native D3 attributes - they must be lowercase.
|
||||||
|
|
||||||
|
|
||||||
|
## Links
|
||||||
|
|
||||||
|
- `FROMID`: mandatory, string, id of node, where a link starts (links are able to showing directions, see also [showLinkDirection](./module-API.html#.showLinkDirection))
|
||||||
|
- `TOID`: mandatory, string, id of node, where a link ends
|
||||||
|
- `STYLE`: optional, string, can be `solid` (default), `dotted` or `dashed`
|
||||||
|
- `COLOR`: optional, string, must be a HTML color code like `green` or `#00ff00`
|
||||||
|
- `LABEL`: optional, string, label for the link
|
||||||
|
- `INFOSTRING`: optional, string, this string is shown as a tooltip - see also [showTooltips](./module-API.html#.showTooltips) and [tooltipPosition](./module-API.html#.tooltipPosition)
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
The following data (XML notation, not all records shown) is included in the source code. You can deliver your data in three formats: JSON object, JSON string or XML string. See the examples below.
|
||||||
|
|
||||||
|
|
||||||
|
## JSON Notation Example
|
||||||
|
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
"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",
|
||||||
|
"LABEL":"A link label"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## XML Notation Example
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<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."
|
||||||
|
/>
|
||||||
|
<nodes
|
||||||
|
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."
|
||||||
|
/>
|
||||||
|
<links
|
||||||
|
FROMID="7698"
|
||||||
|
TOID="7839"
|
||||||
|
STYLE="dashed"
|
||||||
|
LABEL="A link label"
|
||||||
|
/>
|
||||||
|
</data>
|
||||||
|
```
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
Please note, that you have to deliver distinct data to ensure your graph is rendered correctly - see also this [issue on GitHub](https://github.com/ogobrecht/d3-force-apex-plugin/issues/17). It is always a good idea to review your queries/data before you try to use it in a visualization ;-)
|
||||||
|
|
||||||
|
## Oracle - Table EMP
|
||||||
|
|
||||||
|
This query is the base for the shipped sample data:
|
||||||
|
|
||||||
|
```sql
|
||||||
|
WITH
|
||||||
|
nodes AS ( --> START YOUR NODES QUERY HERE
|
||||||
|
SELECT XMLELEMENT( "nodes", xmlattributes(
|
||||||
|
empno AS id
|
||||||
|
, ename AS label
|
||||||
|
, sal AS sizevalue
|
||||||
|
, d.deptno AS colorvalue
|
||||||
|
--, d.dname AS colorlabel -- optional, used for the graph legend
|
||||||
|
--, 'http://...' AS link -- optional
|
||||||
|
--, 'some text' AS infostring -- optional, rendered as tooltip
|
||||||
|
--, 'false' AS labelcircular -- optional, overwrites labelsCircular
|
||||||
|
--, 'http://...' AS image -- optional, background image for a node
|
||||||
|
--, 'true' AS "fixed" -- optional | fixed, x and y are native
|
||||||
|
--, 100 AS "x" -- optional | D3 attributes, they must be
|
||||||
|
--, 100 AS "y" -- optional | lowercase
|
||||||
|
) ) AS xml_nodes
|
||||||
|
FROM emp e join dept d on e.deptno = d.deptno --< STOP YOUR NODES QUERY HERE
|
||||||
|
),
|
||||||
|
links AS ( --> START YOUR LINKS QUERY HERE
|
||||||
|
SELECT XMLELEMENT( "links", xmlattributes(
|
||||||
|
empno AS fromid
|
||||||
|
, NVL(mgr,empno) AS toid
|
||||||
|
--, 'dashed' AS style -- optional, solid, dotted or dashed
|
||||||
|
--, 'red' AS color -- optional, must be a HTML color code
|
||||||
|
--, 'some text' AS infostring -- optional, rendered as tooltip
|
||||||
|
) ) AS xml_links
|
||||||
|
FROM emp --< STOP YOUR LINKS QUERY HERE
|
||||||
|
)
|
||||||
|
SELECT XMLSERIALIZE( DOCUMENT( XMLELEMENT( "data",
|
||||||
|
( SELECT XMLAGG( xml_nodes ) FROM nodes ),
|
||||||
|
( SELECT XMLAGG( xml_links ) FROM links ) ) ) INDENT ) AS single_clob_result
|
||||||
|
FROM DUAL
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Oracle - Data Model of Current Schema
|
||||||
|
|
||||||
|
With this query you can visualize the data model of the current schema. Tested on Oracle 11g. Some subqueries select more data then needed for the visualization - this could be a starting point for your own custom visualization.
|
||||||
|
|
||||||
|
ATTENTION: I tried to speed up the dictionary queries by using the with clause and filtering each subquery for the desired tables. Also, I tried to get the correct NOT NULL informations from the dictionary, since the nullable column in user_tab_columns does not reflect table level not null constraints. If you play around with the query to find an own solution you can run in massive performance problems when you join directly the dictionary views.
|
||||||
|
|
||||||
|
Many thanks to Adrian Billington for his excellent [article about working with long columns](http://www.oracle-developer.net/display.php?id=430).
|
||||||
|
|
||||||
|
```sql
|
||||||
|
--> The following helper function is needed to read the constraint search condition:
|
||||||
|
CREATE OR REPLACE FUNCTION get_long_search_condition( p_constraint_name IN VARCHAR2 )
|
||||||
|
RETURN VARCHAR2
|
||||||
|
AS
|
||||||
|
v_return LONG;
|
||||||
|
CURSOR c_search_condition
|
||||||
|
IS
|
||||||
|
SELECT search_condition
|
||||||
|
FROM user_constraints
|
||||||
|
WHERE constraint_name = p_constraint_name;
|
||||||
|
BEGIN
|
||||||
|
OPEN c_search_condition;
|
||||||
|
FETCH c_search_condition INTO v_return;
|
||||||
|
CLOSE c_search_condition;
|
||||||
|
RETURN SUBSTR( v_return, 1, 4000 );
|
||||||
|
END;
|
||||||
|
```
|
||||||
|
|
||||||
|
```sql
|
||||||
|
WITH
|
||||||
|
tabs AS ( --> filter your tables here, all other queries use tabs as filter
|
||||||
|
SELECT table_name
|
||||||
|
, NVL( num_rows, 0 ) AS num_rows
|
||||||
|
, CASE --> used for coloring the nodes in the graph
|
||||||
|
WHEN table_name LIKE 'APEX$%' THEN 'APEX websheet apps'
|
||||||
|
WHEN table_name LIKE 'DEMO%' THEN 'Sample database app'
|
||||||
|
WHEN table_name in ('EMP', 'DEPT') THEN
|
||||||
|
'The well known emp & dept tables'
|
||||||
|
ELSE 'uncategorized tables'
|
||||||
|
END
|
||||||
|
AS table_group
|
||||||
|
FROM user_tables
|
||||||
|
WHERE table_name NOT LIKE 'PLSQL%'
|
||||||
|
),
|
||||||
|
cons AS (
|
||||||
|
SELECT owner
|
||||||
|
, constraint_name
|
||||||
|
, constraint_type
|
||||||
|
, table_name
|
||||||
|
, get_long_search_condition( constraint_name ) AS search_condition
|
||||||
|
, r_owner
|
||||||
|
, r_constraint_name
|
||||||
|
, delete_rule
|
||||||
|
, status
|
||||||
|
FROM user_constraints
|
||||||
|
WHERE table_name IN (SELECT table_name FROM tabs)
|
||||||
|
),
|
||||||
|
concols AS (
|
||||||
|
SELECT owner
|
||||||
|
, constraint_name
|
||||||
|
, table_name
|
||||||
|
, column_name
|
||||||
|
, position
|
||||||
|
FROM user_cons_columns
|
||||||
|
WHERE table_name IN (SELECT table_name FROM tabs)
|
||||||
|
),
|
||||||
|
connotnulls AS ( --> because of primary keys and not null check constraints we
|
||||||
|
--> have to select distinct here
|
||||||
|
SELECT DISTINCT table_name, column_name, nullable
|
||||||
|
FROM ( SELECT c.table_name
|
||||||
|
, cc.column_name
|
||||||
|
, c.constraint_name
|
||||||
|
, c.constraint_type
|
||||||
|
, c.search_condition
|
||||||
|
, 'N' AS nullable
|
||||||
|
FROM cons c
|
||||||
|
JOIN concols cc ON c.constraint_name = cc.constraint_name
|
||||||
|
WHERE c.status = 'ENABLED'
|
||||||
|
AND ( c.constraint_type = 'P'
|
||||||
|
OR c.constraint_type = 'C'
|
||||||
|
AND REGEXP_COUNT( TRIM( c.search_condition )
|
||||||
|
, '^"{0,1}'
|
||||||
|
|| cc.column_name
|
||||||
|
|| '"{0,1}\s+is\s+not\s+null$'
|
||||||
|
, 1
|
||||||
|
, 'i' ) = 1 ))
|
||||||
|
),
|
||||||
|
tabcols AS (
|
||||||
|
SELECT t.table_name
|
||||||
|
, t.column_name
|
||||||
|
, t.data_type
|
||||||
|
, t.data_length
|
||||||
|
, t.data_precision
|
||||||
|
, t.data_scale
|
||||||
|
, t.nullable AS nullable_dict
|
||||||
|
--> dict does not recognize table level not null constraints:
|
||||||
|
--> working with long columns:
|
||||||
|
--> http://www.oracle-developer.net/display.php?id=430
|
||||||
|
, NVL( n.nullable, 'Y' ) AS nullable_cons
|
||||||
|
FROM user_tab_columns t
|
||||||
|
LEFT JOIN connotnulls n
|
||||||
|
ON t.table_name = n.table_name
|
||||||
|
AND t.column_name = n.column_name
|
||||||
|
WHERE t.table_name IN (SELECT table_name FROM tabs)
|
||||||
|
),
|
||||||
|
fks AS (
|
||||||
|
SELECT concols.table_name AS source_table
|
||||||
|
, r_concols.table_name AS target_table
|
||||||
|
, cons.status
|
||||||
|
, tabcols.nullable_cons
|
||||||
|
FROM cons
|
||||||
|
JOIN concols
|
||||||
|
ON cons.constraint_name = concols.constraint_name
|
||||||
|
JOIN concols r_concols
|
||||||
|
ON cons.r_constraint_name = r_concols.constraint_name
|
||||||
|
JOIN tabcols
|
||||||
|
ON concols.table_name = tabcols.table_name
|
||||||
|
AND concols.column_name = tabcols.column_name
|
||||||
|
WHERE cons.constraint_type = 'R'
|
||||||
|
AND cons.status = 'ENABLED'
|
||||||
|
),
|
||||||
|
nodes AS ( --> START YOUR NODES QUERY HERE
|
||||||
|
SELECT XMLELEMENT( "nodes"
|
||||||
|
, xmlattributes( table_name AS id
|
||||||
|
, table_name AS label
|
||||||
|
, table_group AS colorvalue
|
||||||
|
, num_rows AS sizevalue ) )
|
||||||
|
AS xml_nodes
|
||||||
|
FROM tabs --< STOP YOUR NODES QUERY HERE
|
||||||
|
),
|
||||||
|
links AS ( --> START YOUR LINKS QUERY HERE
|
||||||
|
SELECT XMLELEMENT( "links"
|
||||||
|
, xmlattributes( source_table AS fromid
|
||||||
|
, target_table AS toid
|
||||||
|
, CASE nullable_cons
|
||||||
|
WHEN 'Y' THEN 'dashed'
|
||||||
|
WHEN 'N' THEN 'solid'
|
||||||
|
END AS style )
|
||||||
|
, status )
|
||||||
|
AS xml_links
|
||||||
|
FROM fks --< STOP YOUR LINKS QUERY HERE
|
||||||
|
)
|
||||||
|
SELECT XMLSERIALIZE( DOCUMENT( XMLELEMENT( "data",
|
||||||
|
( SELECT XMLAGG( xml_nodes ) FROM nodes ),
|
||||||
|
( SELECT XMLAGG( xml_links ) FROM links ) ) ) INDENT ) AS single_clob_result
|
||||||
|
FROM DUAL
|
||||||
|
```
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
Some people have special use cases and ask interesting questions. On this page we collect them to provide examples for other users.
|
||||||
|
|
||||||
|
|
||||||
|
## Speed up background images on nodes
|
||||||
|
|
||||||
|
When you use background images on nodes instead of background colors this can slow down your graphs render performance. This is depending on the render performance of your browser, but even the fastest browser engines can have big problems with too many and/or too big images.
|
||||||
|
|
||||||
|
One possible workaround is to switch the background images to background colors when the force is starting and switch back to images when the force is stopping. Fortunately we have events for this available. Here an example - please align the graphs variable `example` to your specific one:
|
||||||
|
|
||||||
|
```js
|
||||||
|
example.onForceStartFunction(
|
||||||
|
function () {
|
||||||
|
example.nodes().each(function (node) {
|
||||||
|
elem = d3.select(this);
|
||||||
|
// Save the reference to the SVG pattern in a new node attribute.
|
||||||
|
// Your provided image URL is used in the pattern, not direct in the fill attribute.
|
||||||
|
// This is how SVG works, sorry. You can inspect the patterns in your browser console.
|
||||||
|
node.fill_backup = elem.style("fill");
|
||||||
|
elem.style("fill", "silver")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
example.onForceEndFunction(
|
||||||
|
function () {
|
||||||
|
example.nodes().each(function (node) {
|
||||||
|
// Write back the saved reference to the SVG pattern.
|
||||||
|
d3.select(this).style("fill", node.fill_backup);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Thanks are going to github.com/Ignacius68 for questions around this topic.
|
||||||
|
|
||||||
|
|
||||||
|
## Stop force early when all nodes are fixed
|
||||||
|
|
||||||
|
This use case can be related to the previous one. If you deliver data with predefined, fixed positions for all nodes then the force is still running and calculate all positions. The fixed nodes are not updated within the ticks but the force is running as usual. This might become a problem when you wait for the force end to do some own things - like with the images from the previous use case.
|
||||||
|
|
||||||
|
The force has to run a minimum time to correct render all nodes. So what can we do? The graph API has currently no method to stop the force directly, but there is a trick. The graph API exposes a method mainly for debugging named `inspect`. With this method you have access to all the graph internal variables and functions. You can try this out in your browser console by executing `example.inspect()`.
|
||||||
|
|
||||||
|
To stop the force after 100ms we reuse the inspect method like so:
|
||||||
|
|
||||||
|
```js
|
||||||
|
example.onForceStartFunction(function () {
|
||||||
|
setTimeout(function () {
|
||||||
|
example.inspect().main.force.stop();
|
||||||
|
}, 100);
|
||||||
|
})
|
||||||
|
|
||||||
|
Thanks are going to github.com/Ignacius68 for questions around this topic.
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"1-getting-started": {
|
||||||
|
"title": "Getting Started"
|
||||||
|
},
|
||||||
|
"2-node-and-link-attributes": {
|
||||||
|
"title": "Node & Link Attributes"
|
||||||
|
},
|
||||||
|
"3-included-sample-data": {
|
||||||
|
"title": "Included Sample Data"
|
||||||
|
},
|
||||||
|
"4-example-queries": {
|
||||||
|
"title": "Example Queries"
|
||||||
|
},
|
||||||
|
"5-special-use-cases": {
|
||||||
|
"title": "Special Use Cases"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,129 @@
|
|||||||
|
|
||||||
|
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
@ -0,0 +1,210 @@
|
|||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "We looked for different ways that knowledge can be maintained and preserved. We visited different libraries of different scales. We investigated their operations and their levels of legality. We interviewed people who adopted the role of librarians in their unique ways. From these experiences, we started outlining our workshop. The workshop Knowledge in Action invites participants to act the roles and perform the activities crucial to the sustenance of libraries. They interpret and re-imagine the actors that take part in knowledge production and distribution, playing the parts of the librarian, the researcher, the pirate, the publisher, the reader, the writer, the student, the copyist, the printer. The activities embed the participants in different scenarios to shift their accustomed perspective and to start common dialogues. "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "lettrist international"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "imaginist bauhaus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "london psychogeography"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"name": "lettrism"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"name": "COBRA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"name": "ULM"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"name": "bauhaus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"name": "socialism ou barbarie"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"name": "surrealism"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 11,
|
||||||
|
"name": "lacan"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 12,
|
||||||
|
"name": "college dof pataphysics"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 13,
|
||||||
|
"name": "college of sociology"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 14,
|
||||||
|
"name": "oulipo"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 15,
|
||||||
|
"name": "saussure linguistic"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 16,
|
||||||
|
"name": "new criticism"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 17,
|
||||||
|
"name": "barthes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18,
|
||||||
|
"name": "levi-strauss"
|
||||||
|
},
|
||||||
|
{ "id": 19,
|
||||||
|
"name": "mc-luhan"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 20,
|
||||||
|
"name": "CYBERNETICS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 21,
|
||||||
|
"name": "cyberculture"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 22,
|
||||||
|
"name": "AI"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 23,
|
||||||
|
"name": "posthuman"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 24,
|
||||||
|
"name": "counterculture"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 25,
|
||||||
|
"name": "beat generation"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
"links": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 4
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 2,
|
||||||
|
"target": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 6,
|
||||||
|
"target": 3
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"source": 3,
|
||||||
|
"target": 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 8,
|
||||||
|
"target": 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 2,
|
||||||
|
"target": 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 5,
|
||||||
|
"target": 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 12,
|
||||||
|
"target": 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 13,
|
||||||
|
"target": 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 12,
|
||||||
|
"target": 14
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 13,
|
||||||
|
"target": 11
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 11,
|
||||||
|
"target": 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 15,
|
||||||
|
"target": 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 16,
|
||||||
|
"target": 17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 18,
|
||||||
|
"target": 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 20,
|
||||||
|
"target": 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 20,
|
||||||
|
"target": 21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 20,
|
||||||
|
"target": 22
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 20,
|
||||||
|
"target": 23
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 24,
|
||||||
|
"target": 21
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 24,
|
||||||
|
"target": 25
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 19,
|
||||||
|
"target": 16
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Network Advanced</title>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/prettify.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/lang-css.js"></script>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="example"></div><!--the graph container-->
|
||||||
|
<link href="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/ResizeObserver-1.5.0.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-3.5.6.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var w = window.innerWidth;
|
||||||
|
var h = window.innerHeight;
|
||||||
|
|
||||||
|
window.onload = function (){
|
||||||
|
window.example = netGobrechtsD3Force("example")
|
||||||
|
.width(w)
|
||||||
|
.height(h)
|
||||||
|
.charge(-800)
|
||||||
|
.wrapLabels(true)
|
||||||
|
.zoomMode(true)
|
||||||
|
.debug(true) //also creates the "Customize Me" link
|
||||||
|
.render({
|
||||||
|
"data": {
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"ID": "1",
|
||||||
|
"LABEL": "1974 AUTOPOIESIS",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1974 Maturana, Varela - autopoiesis the organization of living systems ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "2",
|
||||||
|
"LABEL": "1975 GAIA THEORY",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "975 Lovelock - the quest for gaia",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "3",
|
||||||
|
"LABEL": "1967 SYMBIOGENESIS",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1967 Margulis - on the origin of mitosing cells",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "4",
|
||||||
|
"LABEL": "CYBORG THEORY",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1985 haraway - cyborg manifesto",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "5",
|
||||||
|
"LABEL": "1995 CYBORG GAIA",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1995 Haraway - Cyborgs and symbionts",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "6",
|
||||||
|
"LABEL": "1993 AUTOPOIETIC GAIA",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1986-87",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "7",
|
||||||
|
"LABEL": "1987 GAIA AND THE TECHNOSPHERES",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1987 Marguils, Sagan - Gaia and the evolution of machines",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "8",
|
||||||
|
"LABEL": "1987 ENACTIVISM",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"LINK": "http://apex.oracle.com/",
|
||||||
|
"INFOSTRING": "1987 Varela, Maturana - the tree of knowledge",
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"FROMID": "4",
|
||||||
|
"TOID": "5",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "5",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "6",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "2",
|
||||||
|
"TOID": "6",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "3",
|
||||||
|
"TOID": "6",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "6",
|
||||||
|
"TOID": "7",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "8",
|
||||||
|
"STYLE": "solid",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}); //sample data is provided when called without data
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "A"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "B"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "C"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "D"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"name": "E"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"name": "F"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"name": "G"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"name": "H"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"name": "I"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"name": "J"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 1,
|
||||||
|
"target": 6
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 2,
|
||||||
|
"target": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 2,
|
||||||
|
"target": 7
|
||||||
|
}
|
||||||
|
,
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 3,
|
||||||
|
"target": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 8,
|
||||||
|
"target": 3
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"source": 4,
|
||||||
|
"target": 5
|
||||||
|
}
|
||||||
|
,
|
||||||
|
|
||||||
|
{
|
||||||
|
"source": 4,
|
||||||
|
"target": 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": 5,
|
||||||
|
"target": 10
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,487 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Network Advanced</title>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/prettify.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/lang-css.js"></script>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<style type="text/css">
|
||||||
|
body {margin: 0; overflow: hidden;}
|
||||||
|
|
||||||
|
svg{ background: black !important; border: none !important;}
|
||||||
|
|
||||||
|
circle {
|
||||||
|
cursor: grab;
|
||||||
|
fill: black !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 15px !important;
|
||||||
|
fill: white !important;
|
||||||
|
transform:translateY(22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
circle.highlighted {
|
||||||
|
stroke: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
line.highlighted {
|
||||||
|
stroke: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
line{ stroke: black !important; }
|
||||||
|
|
||||||
|
.link {
|
||||||
|
fill: black !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="example"></div><!--the graph container-->
|
||||||
|
<link href="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/ResizeObserver-1.5.0.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-3.5.6.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var w = window.innerWidth;
|
||||||
|
var h = window.innerHeight;
|
||||||
|
|
||||||
|
window.onload = function (){
|
||||||
|
window.example = netGobrechtsD3Force("example")
|
||||||
|
.width(w)
|
||||||
|
.height(h)
|
||||||
|
.customize(false)
|
||||||
|
.charge(-800)
|
||||||
|
.showLinkDirection(false)
|
||||||
|
.wrapLabels(true)
|
||||||
|
.zoomMode(true)
|
||||||
|
.charge(-100)
|
||||||
|
.gravity(0.05)
|
||||||
|
.friction(1)
|
||||||
|
.theta(0.05)
|
||||||
|
.debug(true) //also creates the "Customize Me" link
|
||||||
|
.render({
|
||||||
|
"data": {
|
||||||
|
"nodes": [{
|
||||||
|
"ID": "1",
|
||||||
|
"LABEL": "SITUATIONISM",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
"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": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "8",
|
||||||
|
"LABEL": "COBRA",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "9",
|
||||||
|
"LABEL": "ULM",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 3500,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "10",
|
||||||
|
"LABEL": "BAUHAUS",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "11",
|
||||||
|
"LABEL": "SURREALISM",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "12",
|
||||||
|
"LABEL": "College of Sociology",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 3000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "13",
|
||||||
|
"LABEL": "College of Pataphysics",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 3000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "14",
|
||||||
|
"LABEL": "Oulipo",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "15",
|
||||||
|
"LABEL": "Lacan",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "16",
|
||||||
|
"LABEL": "LINGUISTICS / SEMIOTICS (Saussure)",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "17",
|
||||||
|
"LABEL": "Ogden & Richard (New Criticism)",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "18",
|
||||||
|
"LABEL": "Barthes",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "19",
|
||||||
|
"LABEL": "Levi-Strauss",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "20",
|
||||||
|
"LABEL": "Media Theory (Mc Luhan)",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "21",
|
||||||
|
"LABEL": "CYBERNETICS",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "22",
|
||||||
|
"LABEL": "Cyberculture",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "23",
|
||||||
|
"LABEL": "COUNTERCULTURE",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "24",
|
||||||
|
"LABEL": "AI",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "25",
|
||||||
|
"LABEL": "PostHuman",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "26",
|
||||||
|
"LABEL": "Beat Generation",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "27",
|
||||||
|
"LABEL": "PSYCHOANALYSIS",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "28",
|
||||||
|
"LABEL": "DADA",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "29",
|
||||||
|
"LABEL": "NEO-DADA",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "30",
|
||||||
|
"LABEL": "POP-ART",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "31",
|
||||||
|
"LABEL": "FLUXUS",
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "11",
|
||||||
|
"TOID": "7",
|
||||||
|
"COLOR": "red",
|
||||||
|
"STYLE": "dashed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "11",
|
||||||
|
"TOID": "12",
|
||||||
|
"COLOR": "red",
|
||||||
|
"STYLE": "dashed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "11",
|
||||||
|
"TOID": "13",
|
||||||
|
"STYLE": "dashed",
|
||||||
|
"COLOR": "red",
|
||||||
|
"LABEL": "Queneaux"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "13",
|
||||||
|
"TOID": "14",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
"LABEL": "Queneaux"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "12",
|
||||||
|
"TOID": "15",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "16",
|
||||||
|
"TOID": "17",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "17",
|
||||||
|
"TOID": "18",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "17",
|
||||||
|
"TOID": "19",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "17",
|
||||||
|
"TOID": "20",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "17",
|
||||||
|
"TOID": "15",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "17",
|
||||||
|
"TOID": "21",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "21",
|
||||||
|
"TOID": "22",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "21",
|
||||||
|
"TOID": "24",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "21",
|
||||||
|
"TOID": "25",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "26",
|
||||||
|
"TOID": "23",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "23",
|
||||||
|
"TOID": "22",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "21",
|
||||||
|
"TOID": "15",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "21",
|
||||||
|
"TOID": "20",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "27",
|
||||||
|
"TOID": "21",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "27",
|
||||||
|
"TOID": "15",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "27",
|
||||||
|
"TOID": "12",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "21",
|
||||||
|
"TOID": "9",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "17",
|
||||||
|
"TOID": "9",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "28",
|
||||||
|
"TOID": "11",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "28",
|
||||||
|
"TOID": "29",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "29",
|
||||||
|
"TOID": "30",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}); //sample data is provided when called without data
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>d3 graph</title>
|
||||||
|
<script src="https://d3js.org/d3.v4.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="my_dataviz"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// set the dimensions and margins of the graph
|
||||||
|
var margin = { top: 0, right: 0, bottom: 0, left: 0 },
|
||||||
|
width = 2000 - margin.left - margin.right,
|
||||||
|
height = 2000 - margin.top - margin.bottom;
|
||||||
|
|
||||||
|
// append the svg object to the body of the page
|
||||||
|
var svg = d3
|
||||||
|
.select("#my_dataviz")
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
d3.json("data_network.json", function(data) {
|
||||||
|
// Initialize the links
|
||||||
|
var link = svg
|
||||||
|
.selectAll("line")
|
||||||
|
.data(data.links)
|
||||||
|
.enter()
|
||||||
|
.append("line")
|
||||||
|
.style("stroke", "#aaa");
|
||||||
|
|
||||||
|
// Initialize the nodes
|
||||||
|
var node = svg
|
||||||
|
.selectAll("circle")
|
||||||
|
.data(data.nodes)
|
||||||
|
.enter()
|
||||||
|
.append("circle")
|
||||||
|
.attr("r", 5)
|
||||||
|
.style("fill", "black");
|
||||||
|
|
||||||
|
var text = svg
|
||||||
|
.selectAll("text")
|
||||||
|
.data(data.nodes)
|
||||||
|
.enter()
|
||||||
|
.append("text")
|
||||||
|
.text(function(d) {
|
||||||
|
return d.name;
|
||||||
|
})
|
||||||
|
.style("font-size", "18px")
|
||||||
|
.style("color", "blue");
|
||||||
|
|
||||||
|
// Let's list the force we wanna apply on the network
|
||||||
|
var simulation = d3
|
||||||
|
.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes
|
||||||
|
.force(
|
||||||
|
"link",
|
||||||
|
d3
|
||||||
|
.forceLink() // This force provides links between nodes
|
||||||
|
.id(function(d) {
|
||||||
|
return d.id;
|
||||||
|
}) // This provide the id of a node
|
||||||
|
.links(data.links) // and this the list of links
|
||||||
|
)
|
||||||
|
.force("charge", d3.forceManyBody().strength(-500)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
|
||||||
|
.force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area
|
||||||
|
.on("end", ticked);
|
||||||
|
|
||||||
|
var dragDrop = d3
|
||||||
|
.drag()
|
||||||
|
.on("start", function(node) {
|
||||||
|
node.cx = node.x;
|
||||||
|
node.cy = node.y;
|
||||||
|
})
|
||||||
|
.on("drag", function(node) {
|
||||||
|
simulation.alphaTarget(0.7).restart();
|
||||||
|
node.cx = d3.event.x;
|
||||||
|
node.cy = d3.event.y;
|
||||||
|
})
|
||||||
|
.on("end", function(node) {
|
||||||
|
if (!d3.event.active) {
|
||||||
|
simulation.alphaTarget(0);
|
||||||
|
}
|
||||||
|
node.cx = null;
|
||||||
|
node.cy = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
// This function is run at each iteration of the force algorithm, updating the nodes position.
|
||||||
|
function ticked() {
|
||||||
|
link
|
||||||
|
.attr("x1", function(d) {
|
||||||
|
return d.source.x;
|
||||||
|
})
|
||||||
|
.attr("y1", function(d) {
|
||||||
|
return d.source.y;
|
||||||
|
})
|
||||||
|
.attr("x2", function(d) {
|
||||||
|
return d.target.x;
|
||||||
|
})
|
||||||
|
.attr("y2", function(d) {
|
||||||
|
return d.target.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
node
|
||||||
|
.attr("cx", function(d) {
|
||||||
|
return d.x + 6;
|
||||||
|
})
|
||||||
|
.attr("cy", function(d) {
|
||||||
|
return d.y - 6;
|
||||||
|
});
|
||||||
|
|
||||||
|
text
|
||||||
|
.attr("dx", function(d) {
|
||||||
|
return d.x + 6;
|
||||||
|
})
|
||||||
|
.attr("dy", function(d) {
|
||||||
|
return d.y - 6;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,179 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Network Advanced</title>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/prettify.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/scripts/prettify/lang-css.js"></script>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="example"></div><!--the graph container-->
|
||||||
|
<link href="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/ResizeObserver-1.5.0.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-3.5.6.min.js"></script>
|
||||||
|
<script src="d3-force-apex-plugin/docs/lib/d3-force-3.1.0.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var w = window.innerWidth;
|
||||||
|
var h = window.innerHeight;
|
||||||
|
|
||||||
|
window.onload = function (){
|
||||||
|
window.example = netGobrechtsD3Force("example")
|
||||||
|
.width(w)
|
||||||
|
.height(h)
|
||||||
|
.charge(-800)
|
||||||
|
.wrapLabels(true)
|
||||||
|
.zoomMode(true)
|
||||||
|
.debug(true) //also creates the "Customize Me" link
|
||||||
|
.render({
|
||||||
|
"data": {
|
||||||
|
"nodes": [{
|
||||||
|
"ID": "1",
|
||||||
|
"LABEL": "XPUB",
|
||||||
|
"COLORVALUE": "10",
|
||||||
|
"COLORLABEL": "Accounting",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
"LABELCIRCULAR": true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "2",
|
||||||
|
"LABEL": "Monoskop",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"LABELCIRCULAR": false,
|
||||||
|
|
||||||
|
"SIZEVALUE": 3500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "3",
|
||||||
|
"LABEL": "Varia",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2850
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "4",
|
||||||
|
"LABEL": "Constant",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2850,
|
||||||
|
"INFOSTRING": "cipollotti"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "5",
|
||||||
|
"LABEL": "V2",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2850
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "6",
|
||||||
|
"LABEL": "CCRU",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2850,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "7",
|
||||||
|
"LABEL": "Software Studies",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "8",
|
||||||
|
"LABEL": "Cultural studies",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 2000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "9",
|
||||||
|
"LABEL": "Nettime",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 3500,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "10",
|
||||||
|
"LABEL": "Institute of Networked Cultures",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "11",
|
||||||
|
"LABEL": "Media Theory",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "12",
|
||||||
|
"LABEL": "Net Art",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"ID": "13",
|
||||||
|
"LABEL": "Software Art",
|
||||||
|
"COLORVALUE": "30",
|
||||||
|
"COLORLABEL": "Sales",
|
||||||
|
"SIZEVALUE": 13000,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "2",
|
||||||
|
"STYLE": "solid",
|
||||||
|
"LABEL": "Dusan Barok"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "1",
|
||||||
|
"TOID": "3",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "4",
|
||||||
|
"TOID": "1",
|
||||||
|
"STYLE": "dotted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "9",
|
||||||
|
"TOID": "10",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "6",
|
||||||
|
"TOID": "7",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "7",
|
||||||
|
"TOID": "1",
|
||||||
|
"STYLE": "solid",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FROMID": "8",
|
||||||
|
"TOID": "6",
|
||||||
|
"STYLE": "solid",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}); //sample data is provided when called without data
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue