Build a panel plugin with D3.js

Hello everybody,
i have the example ‘Build a panel plugin with D3.js’:

successfully created.
I would now like to use the data from the Grafana query.
What do I have to change?

Best regards
Thomas.

The data is available as a data prop. It’s being explained here.

Let me know if you have trouble accessing it.

Hi!
I’m trying to use D3 in a custom panel as well, but struggling with updating the visualization inside the svg. Any chance of an example that uses the typical selectall().data().enter().append() from D3?

I’ve been trying this tutorial (https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app), but keep running into a lot of build errors…

edit: I have a D3 visualization written that works with the data how the plugin would receive it, but I’m unclear how to translate that regular js into something that would work inside the plugin.

Any tips? Thanks!

There are several ways of using D3 in a React component. I don’t have any good examples on top of my head, but if you want to use the regular D3.js methods you mentioned, you need to handle updates to the component yourself. Generally I’ve found this approach more error-prone than to use D3.js for data transformation, and then using React for building the DOM.

When I experimented with this, I made it work by calling selectall().data().enter().append() etc on a reference (using useRef) inside the useEffect function. But again, you need to make sure to clean up the DOM on every render.