Latest version | Docs & API Reference | Online demo | APEX Plugin demo
This is a D3 force implementation, playground and Oracle APEX plugin, which uses the D3 visualization library to render a network layout. It has the following features:
apex-plugindist/example.html and docs/tutorial-1-getting-started.htmlI 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.
This D3 force implementation uses semantic versioning.
Please refer to the documentation 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.
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.
Thanks are going to github.com/Ignacius68 for the valuable feedback and all the beta testing.
Because of breaking API changes we have a new major realease:
zoomToFitOnForceEnd (was false in the past), zoomToFitOnResize (new option), keepAspectRatioOnResize (new 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 and play around with itzoomMode - they work simply alwayszoomMode sets only the ability for the end user to use zoom and panzoom has now a parameter duration (API reference)transform has now a parameter duration (API reference)useDomParentWidth (API reference) no longer needs a render call to take into effect - it works now immediately; Please remove unneccesary render calls to save CPU and battery timezoomSmooth - can be replaced with the zoom method (API reference), 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.
style or classed - also see the D3 docsThanks are going to github.com/Ignacius68 for the inspiration.
wrapLabels with a configurable max width - thanks to Ekaterina & Andrey for the ideazoomToFitOnForceEnd to fit the graph in the available space on force end (like the automatic label placement) - needs the zoomMode switched on to work properlyzoomToFit, which is used by the option zoomToFitOnForceEnd - now you can do things like example.width(800).height(600).zoomToFit() :-)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 widthpreventLabelOverlappingOnForceEnd: 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 testinglabelPlacementIterations: 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 from the author Evan Wangdotted for the links STYLE attribute: Now you have solid, dashed and dotted available for link stylesINFOSTRING: 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 :-)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 markerstransform: 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}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 attributesonLinkClickFunction: 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 linkssetDomParentPaddingToZero: 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 elementoptions 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 callshowLoadingIndicatorOnAjaxCall: 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);)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 workingminZoomFactor: The minimum possible zoom factormaxZoomFactor: The maximum possible zoom factorzoom: Can be used to programatically zoom to a point in the graph with the three parameters centerX, centerY and viewportWidth; read more...zoomSmooth: Does the same as the zoom method, but animated in a nice way: read more...nodeDataById: Helper function to get the data of one node. Can be helpful for the two new zoom methods to programatically focus a single nodeshowLegend: renders a legend for all (distinct) COLORVALUE attribute values of the nodesshowLabels: 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 globallylassoMode: boolean - if set to true you can select nodes with a lassolassostart, 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 referencealignFixedNodesToGrid: 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)gridSize: numeric - default 50 - grid size for the new option alignFixedNodesToGridIMAGE: 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 ;-)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)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 positionreleaseFixedNodesresume: 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();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();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 ;-)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