D3 script not working with dash

Dash Python
1

Hey,
I am trying to use an external script (in my local computer) which makes my custom graph. The script uses d3 and makes the chart.
In my dash, I’ve added 2 separate tabs, one for using Plotly charts and the other tab for the d3 chart.
I’ve added the script to assets folder along with d3.js and d3.min.js but I don’t get any chart but just the content that I added in the tab.

The script works by taking the ID of the div and it makes chart in it using that ID. When I do inspect element, it shows the correct ID of the div.
On running the python script, the Plotly charts works perfectly but there is an error which pop up: Failed to load the resource: Could not connect to the server.

I have also added d3 using external script but it still doesn’t work.

How can I make the d3 javascript file work?

So far I have tried:

            html.Div([
            	html.Div(id="chart"),
            	html.H1("This is the content in tab 2"),
                html.P("A graph here would be nice!")
                
            ])
        ]),

Which shows the content in H1 and P but chart is not created. Also, in sources I can see that all the js files are loaded.

2

The issue here is that your custom scripts will execute before <div id="chart"> has been added to the page. You could wrap the script in a setInterval that checks for the div to have been created before running (with some caveats - see Adding Javascript to my app). But a much more valuable way to do this in the long run would be to wrap your chart in a dash component. See https://dash.plot.ly/d3-react-components - that way you’ll be able to control the chart with dash props, as well as read information out of it via callbacks.