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?
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…
I am calling the jQuery and d3.js remotely using the Assets plugin as follows
doing this with the element style attr ‘id’
I am doing this entirely with custom js file using d3 functions for DOM manipulation