D3 Graph Rendering

I have blog setup (using antimatter theme) and each blog item includes js libraries [jQuery, D3.js] and a custom script. All work as designed, however on the first page/item visited in each session will render. When I navigate to a alternate page, the d3 visualization does not render.

Curiously I observe that when I go into the plugins panel in the Admin UI, and disable a plugin (any plugin) then the next page/item I go to will render, but any all alternate pages do not.

Any idea how to trouble shoot this so that I can have different d3 visualizations appear on different blog items? Any insight recommendation are appreciated.

This happens because of caching. What DOM-element is the D3-vizualisation bound too? You should be observing errors in the browser-console.

Each blog-item has a parent/container div with a unique ‘id’ attr. Using d3, I am selecting this div, appending an svg element, and adding the d3 visualization elements to the svg. To my surprise, I do not receive any errors in the browser console for the failed d3 scripts to help me troubleshoot.

It’s hard to tell what actually breaks this, that clearing cache resolves; would probably have to see the code and how it operates in action. A few things to test and clear up to verify the issue:

  • Does disabling caching, through cache: enabled: false and potentially twig: cache: false, resolve it?
  • How and where is D3 instantiated? A script-tag within Twig, or referencing a JS-file?
  • How are you constructing the unique identifiers for the containers?
  • How are you appending the SVG-elements? With Twig or JS?
1 Like

Wow. Impressive stuff here. Can’t thank you you enough for these suggestions. As it happens your first bullet did the trick, I disabled cache in the system.yaml and all immediately worked as expected.

Providing some additional context for future reference…

Instantiation
I am calling the jQuery and d3.js remotely using the Assets plugin as follows

{assets:js order:10}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://d3js.org/d3.v6.min.js
script.js
{/assets}

Unique ID
doing this with the element style attr ‘id’

Append svg
I am doing this entirely with custom js file using d3 functions for DOM manipulation