Hello,
I'm having an issue with the D3 library and integrating it with OutSystems. My particular issue is relating to update the graph. I would like to mention I'm fairly new to the D3 library. Therefore, my JavaScript may be the cause. However, I feel that my issue is related to how I'm calling my script in Outsystems.
I created a reactive application and wrote a script to build a D3 bar graph. I'm able to display the bar graph on my screen. I have a filter to adjust the aggregate, which will lead to updating the graph. However, when the filter action is called, a new graph is created on the screen. The old graph with the old data still remains.
My idea is to have the JavaScript that builds the D3 bar graph in Script section as a function. The screen will have the on-fetch action attached to the aggregate. The fetch action will build the JSON and call the D3 function. The filter action has a similar design to the on-fetch action where it refreshes the aggregate with the new data and calls the D3 function. To get more information, I attached an oml.
I appreciate the help.
Best regards,
Michael
Please check here
https://personal-u1aragiz.outsystemscloud.com/D3Example/Screen1?_ts=638766858303458805
is this what you are looking for ?
test with 2024 and 2025.
You need to add on the top. If you want I can share oml.
d3.select(".svg-content-responsive").remove();
can you provide more detail like your data and if possible test link of your implementation because in your oml right now I am getting error.
Also did you try
https://www.outsystems.com/forge/component-overview/9810/d3-graph-builder-o11
https://www.outsystems.com/forge/component-overview/8792/d3-integration-sample-o11
or you just want to use your custom js ?
Hello Navneet,
Thank you for your suggestion. Here is a link to my test application.
You are correct, the idea was to filter between years of 2024 and 2025. The data looks something like this (See screenshot below).
I did look into the two forge items that you suggested. D3 integration sample does a similar approach. While D3 graph builder has built in JavaScript and structure to better align with OutSystems process. However, D3 graph builder only works with three graphs combo, series, scatter graph. Based off my experience both of these forge applications have the same issue when trying to update an existing graph with new data.
The remove function is a good workaround to resolve my issue. My idea was to use the D3 update pattern to perform the data modification. Based off your solution this informs me that my issue is the JS and not OutSystems. My update pattern for enter, update, and exit are incorrect.
Thank you for the assistance.
you can check following documentation that how we can update data in d3js
https://www.d3indepth.com/enterexit/
there is a example as well
https://observablehq.com/@deaxmachina/d3-general-update-pattern
https://www.freecodecamp.org/news/how-to-work-with-d3-jss-general-update-pattern-8adce8d55418/
Thank you for all your help.
I will look over the documentations you provided. Based off everything we talked about; it seems like this isn't an OutSystems integration issue rather my lack of understanding in D3. Since we were able to resolve the duplicate graphs being generated with the remove function and this seem like it no longer an OutSystems issue. I will close this post.