ogobrecht / d3-force-apex-plugin Goto Github PK

Hi Ottmar,

I just attempted an upgrade to some of my graphs, to add icons/images to the nodes. I have tried several strategies, and different image types (e.g. .svg, .jpg, .gif, .png), but every attempt I've made dramatically slows down the render ticks.

Without the images, the ticks are so fast that the nodes "flow" until they settle to final position, with the time to completion being 1-3 seconds. WITH the images, the ticks slow down to about 1 per second, making the render take a couple of minutes.

Are there tricks to this? For instance, maybe I need .svg icons that are designed to be circular rather than square? I'm not certain what else to try, so much appreciated if you can give me any tips.

• Ig

I'm still playing with this plugin. Yesterday I spent some time with re-organizing some of the nodes and pining them to some user friendly position as x and y coordinates are different than in our current C# application (different grid). I just pined few nodes as there is more than 100 node and I just wanted to test fixed position feature. Today I updated the coordinates to database, however it seems like they are ignored.

When query returns true as fixed than nodes are pinned in the grid however with each refresh of the page coordinates are changing. It seems like the coordinates from DB are ignored.

Attributes:
{
"minNodeRadius": 10,
"useDomParentWidth": true,
"lassoMode": false,
"showLabels": true,
"zoomMode": true,
"pinMode": true,
"colorScheme": "direct",
"height": 650,
"debug": true,
"showTooltips": true,
"tooltipPosition": "node",
"labelDistance": 2,
"zoomMode": true,
"minZoomFactor": 0.1,
"transform": {
"translate": [
81.23854596788073,
51.81832738338741
],
"scale": 0.757858283255199
}
}

Custom Styles:
.net_gobrechts_d3_force_tooltip { width: 500px !important; }
//.net_gobrechts_d3_force text.label{ display: none; }

data.zip

EDIT:
Shame on me. This issue can be closed. I looked also to some other closed issues and seems like similar one was already reported. I've checked the plugin version and I was using v2.0.0. After upgrade to 2.0.1 its fine.

I've initially downloaded sample app via https://apex.world/ords/f?p=100:710:8948694552907::::P710_PLG_ID:NET.GOBRECHTS.D3.FORCE

where it seems like there is a link to older demo app version.

The graph places nodes incorrect. Check the images below.
D3 Force apex graph

Love the plugin, I don't understand the height attribute. I wish I could just have it be 100% of the div space. The size changes when I expand the sidebars and it is making the graph either too small or run off the page. Thank you!

See here for some help: https://alligator.io/svg/textpath/

Note: Issue was opened for @apex-michael

Hi Ottmar,

I've been working to add new nodes to my graphs without refreshing the page, like I did already with links, but I can't seem to get it working as I want. Maybe you could point out what I might have wrong? I'm trying to add the new node in the center of the current visual field, by using the current transform values. The node isn't appearing where I set its x and y, however. Do I perhaps need to set the x and y after creating the node??

Global Declaration code, called when I have the node data captured and want to add it.

curGraph = null;
nodeType = "";
updateBtn = "";

function setWorkingGraph() {
// CURRENT_TAB is populated every time one of the tab controls for my graphs are clicked, setting this value to the current graph name.
graphID = jQuery("#P60_CURRENT_TAB").val();

switch(graphID) {
    case 'SystemsGraph':
        curGraph = d3_force_SystemsGraph;
        nodeType = "System";
        updateBtn = "#P60_gotoAddSystem";
        break;
    case 'LayersGraph':
        curGraph = d3_force_LayersGraph;
        nodeType = "Layer";
        updateBtn = "#P60_gotoAddLayer";
        break;
    case 'ComponentsGraph':
        curGraph = d3_force_ComponentsGraph;
        nodeType = "Component";
        updateBtn = "#P60_gotoAddComponent";
        break;
    case 'OperationsGraph':
        curGraph = d3_force_OperationsGraph;
        nodeType = "Operation";
        updateBtn = "#P60_gotoAddOperation";
        break;
}  

}

function addNode() {
// Use a delay to account for time to save the data to DB and close modal.
setTimeout(function (){
if (curGraph === null) { setWorkingGraph(); }
transform = curGraph.transform();
scale = transform.scale;
width = curGraph.width();
height = curGraph.height();
// Calculate current center of visual field
posX = Math.round(( -1 * transform.translate[0] ) + ( 0.5 * ( width/scale ) ));
posY = Math.round(( -1 * transform.translate[1] ) + ( 0.5 * ( height/scale ) ));

    nodeID = jQuery("#P60_NODE_ID").val();
    colorVal = jQuery("#P60_COLOR_ID").val();
    colorLabel = jQuery("#P60_COLOR_LABEL").val();
    nodeLabel = jQuery('#P60_NODE_LABEL').val();
    
    curNodes = curGraph.nodes();
    curNodes.push(
        {
            ID: nodeID
            , SIZEVALUE: 20
            , COLORVALUE: colorVal
            , COLORLABEL: colorLabel
            , LABEL: nodeLabel
            , x: posX
            , y: posY
            , fixed: 1
        }
    );
    curGraph.start();
}, 750);   

}

I have a modal form that captures the node definition, saves it to DB, then populates the values back down to the parent graph page. Once that's done, then it calls the addNode() function. I'm not seeing any errors anywhere, but I'm not getting the node where I want it, either.

Help?

• Ignacius

Hi, Apologies first of all. This isn't probably an issue, but I can't find anywhere where there is a support forum, or a way to raise a question. (Please advise)

I'm trying to use the plugin as a Directed Graph. i.e. entities (records) have multiple relationships with other records.

For example, date this dataset below. Im trying to visualise the relationships with other records. Im expecting the graph to show 6 items. (1 - 6), then the links between them. Is this possible.

ID LINK_ID
1 2
1 3
1 4
2 1
2 5
2 6
3 1
4 5
5 4
5 2
6 2

Instead I get the following:

Thanks
Richard

I've been hoping to find a way to add labels to the links, intended to be very short, but so far I have come up with nothing workable. What I'm hoping for is similar to Visio, where a short label is placed in the middle of the link line.

Is there a way to do this that I may be missing?

I have used the infostring attribute for links, but that displays where I've configured the tooltip display, which is top left. For these short link labels, that's both difficult to place the mouse accurately, and they are so short, it becomes difficult to notice and read.

Appreciate any info!

As usual, my appreciation for the great plugin!

• Ignacius68

Hi,

I am not able to install the Demo ZIP file as a plug-in. My environment is Apex 5.0.1 and Oracle XE 11.2.

I receive following error as I try to install it. Please note that file is getting imported but not able to install.

"File is not a valid Application Express plug-in export file."

Thanks

Sammeer

Would it be possible to have configurable tool tip area size?

If you check issue #12, you can see that the area is simply not enough for more complex tool tips.

Hello Ottmar,

Thank you for this great opportunity - it seems like exactly what I looked for.
Do you have any ready to install app / page, so we can start play around ? ( didn't find it in source code )
Apprciated.
Etay G

I discovered this after the last release in an APEX 5.1.3 application. Although the plugin runs without error in the old (APEX 4.2 theme) sample app on apex.oracle.com (APEX 5.1.4) there seems to be issues under some circumstances. Needs deeper look...

From working on very "dense" graph presentations, I've found the labeling to be a bit challenging. In some cases, depending on naming choices, the nodes end up with long labels.

The width-based split works to a degree, until it starts breaking apart one of the "parts" of the label. For instance, a Component-level node graph has the nodes named as "[System Layer] : [Component]". To accommodate use cases like this, I am requesting a delimiter split option. My recommendation is a 2 character string for the split, which would allow you to still use punctuation within the labels, and have a reliable split mechanism. Further, I would recommend a double colon ("::") as the default delimiter string.

This allows a "multi-part" labeling strategy, as well as the existing "paragraph" labeling strategy.

The logic for a delimiter split "should" be easier, as it's presumably a javascript str.split('::');, for instance.

As to controlling whether it's width or delimiter split, my best idea is to add a drop down option, either option could be the default (whichever you'd prefer to encourage). Another possibility is to have the default as delimiter split, and you clear the delimiter string to perform width split. Drop down choice "feels" easier on the brain to understand. :)

• Ignacius

Hi There,

Just wondering if there is any compatibility issues with using this with IE11/Edge and this plugin? I am able to work the example apex page in chrome, but when i trigger an event the page freezes, crashes and reloads. I have tried to load the debugger for errors however none are thrown and it just crashes.

Thanks

Ryan

Hi,
I really liked your implementation of the forced graph and decided to try and test it out with some of my data. Unfortunately I stumbled upon an Uncaught TypeError when trying to load the example.html. The error:

Uncaught TypeError: Cannot read property 'replace' of undefined
at Object.f.main.init (d3-force-2.0.3.min.js:formatted:20)
at netGobrechtsD3Force (d3-force-2.0.3.min.js:formatted:1353)
at window.onload ((index):29)

I tried to somehow circle around the issue but failed because of my lacking skills in JS. I would love if you could give me some feedback/tips on how to go around the bug or to solve it.

Thanks in advance!

After upgrading APEX to release 18.1 (which I'm told is basically 5.2), there are 3 files showing a 404 error. Has this been seen before? Is there some server cache clearing or restarting that's supposed to happen?

Files "missing": d3-force-2.1.2.css, d3-force-2.1.2.min.js, d3-3.5.6.min.js

With these files having a 404 error, the graph object is not defined. Any information appreciated!

Simple queries are processed with the help of APEX_UTIL.json_from_sql. This produces an extra object property "row", which holds the data. Complex queries has to deliver the data without that extra property. Sorry, tested all the time with complex queries.

Sorry to all,

after fixing the problem that the AJAX refresh is not working WITH items to submit, I have now a problem with the AJAX refresh WITHOUT items to submit (bind variables).

Fix comes this evening latest, sorry.....

This may be user error =); but...
I am not new to programming; but, also not an expert.
I have been unable to render the connection arrows when writing SQL in the APEX region source. The packaged example does not seem to define the "weight" as it does in the js code example.

EG: simple example just does not show the wighted conection arrows:
testemp table csv
deptno, empno, ename, sal, mgr, weight
111, 333, Jeff, 20, 666, 1
111, 222, Jon, 30, 666, 2
111, 111, Bob, 30, 666, 3,
222, 444, Ted, 40, 777, 1

testdept table csv
deptno, dname
111, K
222, FD

Region Source code:
WITH
nodes AS (
SELECT XMLELEMENT( "nodes", xmlattributes(
empno AS id
, ename AS label
, sal AS sizevalue
, d.deptno AS colorvalue
, d.dname AS colorlabel
) ) AS xml_nodes
FROM testemp e JOIN testdept d ON e.deptno = d.deptno
),
links AS (
SELECT XMLELEMENT( "links", xmlattributes(
empno AS fromid
, NVL(mgr,empno) AS toid
, 'dashed' AS style
, 'red' AS color
) ) AS xml_links
FROM testemp
)
SELECT XMLSERIALIZE( DOCUMENT( XMLELEMENT( "data",
( SELECT XMLAGG( xml_nodes ) FROM nodes ),
( SELECT XMLAGG( xml_links ) FROM links ) ) ) INDENT ) AS single_clob_result
FROM DUAL

*running on APEX 4.2 and downloaded your latest plugin version

I've used your plugin with apex 5.0, everything was all right. Till friday, then there was an upgrade (oracle cloud workspace), and now every chart (the example too) throws an error and can't load, the page and the plugin stops at loading:
Error: Syntax error, unrecognized expression: #.
Please help, I don't know where to fix it.
Attached some screenshots.

When using Node D3 attributes
--, 'true' AS "fixed" -- optional | fixed, x and y are native
--, 100 AS "x" -- optional | D3 attributes, they must be
--, 100 AS "y" -- optional | lowercase

The links are not rendered from/to the nodes, they are nor aligned on the same alignment of the nodes inside chart frame.

some help please ? have tried several options..

Good day how to set the line thickness depending on the value I can get in the database?

On large datasets the output is broken by an overflow of the htp.prn buffer. For all the people, who need a workaround before the next release on next weekend:

Please replace this code in the APEX plugin source

DECLARE
  v_pos PLS_INTEGER := 1;
  v_len PLS_INTEGER := 1;
  v_amo PLS_INTEGER := 32767;
  v_chu VARCHAR2(32767);
BEGIN
  WHILE v_pos <= dbms_lob.getlength(v_clob) LOOP
    v_amo := least(32767, dbms_lob.getlength(v_clob) - (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;

with this one:

DECLARE
  v_len PLS_INTEGER;
  v_pos PLS_INTEGER := 1;
  v_amo PLS_INTEGER := 4000;
  v_chu VARCHAR2(32000);
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;

Hallo Ottmar,
many thanks for the plugin for the D3 Force diagram. I would like to use it in order to display dependencies between documents.
It is possible to change from circle rectangle using inside labels?

Many thanks,

Birthe

Hello!

When I fill the cycles with images, the images blurry, using google-chrome or the edge-browser. In Firefox or IE, the images are displayed correctly.

Best regards
Chriz

Hello, Ottmar.

Question: how can I remove the customize link

I did:

where SERV_MODULE_CONTENT - static id region,
this does not work

Thanks,
Best regards, Andrey.

Chrome Browser specific issue.
Hi Ottmar, now that more people are using it, we have seen a browser specific issue with this. In Firefox (101.0.1 (64-bit)) all works fine. But in Chrome (103.0.5060.66 (Official Build) (64-bit)) the label for the link is detached and displays in top left corner, if it is clipped while being in the angle of -PI/2 to PI/2 see attached description.
Chrome Browser issue.pdf

Originally posted by @apex-michael in #49 (comment)

I have an app I'm working on in APEX that is a software registry. I express the interrelationships between code implementations as the graph of the operations of the code.

I worked out a segmentation strategy where I can pick one node and get all the direct dependencies of that node in a smaller graph. What I would like to do, then, is to set the "selected" property for the node that was originally selected, so the "center" of the dependencies is marked.

Is this possible? I haven't found a way yet, but I may be missing it.

I have really enjoyed what you are providing with the D3 plugin. I am trying to learn what I can do with it so that I might take better advantage of its capabilities. I hope that you can point me to what I am doing incorrectly.

I am wanting to draw a fixed position hierarchical diagram in Apex.
I am using the Apex d3-force-apex-plugin version 2.0.0.
All Region Attributes are empty except for Configuration Object setting which is:
{
"minNodeRadius": 8,
"maxNodeRadius": 24,
"colorScheme": "direct",
"useDomParentWidth": true,
"height": 800,
"setDomParentPaddingToZero": true,
"alignFixedNodesToGrid": true,
"showBorder": false,
"showLegend": false,
"lassoMode": true,
"zoomMode": true
}
All Region Definition values are default or empty except for the Source which is:
select '






























' as single_clob_data from dual

The first issue is that the rendered diagram does to come close to the hierarchical image I expected. The nodes seem to align vertically. The second issue is that if I simply refresh the browser window (F5), the nodes continue to be drawn vertically, but in different x-axis offsets.

Please let me know if you are willing to try to provide directions. If there is a better way to communicate, I will use that. If you need more information, please let me know what would help.

I appreciate any assistance that you are willing to provide.

Hi Ottmar

I have been working on showing images in each node, I could do it with link in this way

apex_util.prepare_url (: APP_IMAGES || 'icons8-server-100.png') as image

but not so with images that are in a blob field in a table

(Select decode (nvl (dbms_lob.getlength (IMAGE2), 0), 0, null, apex_util.get_blob_file_src ('P62_IMAGEN', IDIMAGEN)) IMAGE2 from MY_IMAGENES where IDIMAGEN = 1) as image

What can I do to achieve it?

thank you very much for your help.

Hi,

I try the sample data (using emp table) and it's fine.
However, when I delete all records of emp table except "KING" (root node) and refresh the graph, no result is shown.

It seems like a bug. Please kindly check it.

Best Regards,
Kenny Wang

If a graph is configured with the option alignFixedNodesToGrid = true and there are positions provided on the startup, then the nodes have instead of the provided positions random positions. As a workaround it is possible to set the option alignFixedNodesToGrid to false on startup and then switch it to true afterwards.

Found by Philippe Duchateau under APEX 5 with the universal theme.

I've checked your apex plugin in version 5.0.3.00.03 and provided our data via the XML notation.
data.zip

I'm using the following attributes:
{
"useDomParentWidth": true,
"lassoMode": false,
"showLabels": false,
"zoomMode": true,
"pinMode": true,
"colorScheme": "direct",
"height": 650,
"debug": true
}

Once page is loaded tooltips are not disaplayed. They are displayed only when I click on "customize me" link, setup show labels = true, and immediatelly disable the labes with show labels = false.

I have a complex network graph. Once rendered on the page, some nodes are not correctly rendered. I can see links going to the nodes but node itself is missing (it is not possible to do mouse over, or even drag & drop node).

data.zip

Hi,
I need your help - I'm trying to find a way how to save predefined node positions every time when I change them on the chart by dragging a node (or adding one). In other words I want the nodes stay where I left them, with no motion.
Are there any ways to do that?
Sorry if I missed this in previous comments.
Thank you !
Ekaterina

When using the APEX plug-in sample data is rendered before live data is loaded via AJAX call. This is not always the case - for an example the sample app does not has this issue, one of my Universal Theme apps has it. Need some investigation to figure out what the problem is.

Hi,
Running my sql code in the home page I keep getting 00911 error with just one node on the screen?
If i do a single record view on the column 'single_clob_result' in SQL developer from the same sql code I have in the home page and then copy that data to the clipboard and paste it into the 'Your Data' field in the playground and hit the 'set data' button it works fine ?

Data is as follows

<data> <nodes ID="4715" LABEL="Parent" SIZEVALUE="5000" COLORVALUE="30"/> <nodes ID="7535" LABEL="Child" SIZEVALUE="2500" COLORVALUE="35"/> <nodes ID="7537" LABEL="Child" SIZEVALUE="2500" COLORVALUE="35"/> <nodes ID="7539" LABEL="Child" SIZEVALUE="2500" COLORVALUE="35"/> <nodes ID="7541" LABEL="Child" SIZEVALUE="2500" COLORVALUE="35"/> <links FROMID="4715" TOID="7535"/> <links FROMID="4715" TOID="7537"/> <links FROMID="4715" TOID="7539"/> <links FROMID="4715" TOID="7541"/> </data>