在Dash上使用d3.js

在这个问题上我尝试了三种方法，弄了整整两天，终于...不能说完全解决，有一些深层次的原因我没有弄懂。

第一个方法

• Tutorial 1 - React + D3.js, Guiding Principles

• Tutorial 2 - Real World Example: Dash Sunburst

• Tutorial 3 - Real World Example: Dash Network

按照plotly官方文档（https://dash.plotly.com/d3-react-components）的说法和教程，使用D3 + React的方法。当我打开那两个工程文件的时候发现还要装Node.js和React.js（崩溃，太麻烦了）,不过根据官方论坛的反馈，应该是有更简单的使用D3 + React的方法，有兴趣的可以钻研一下。

第二种方法

（https://stackoverflow.com/questions/67372439/embed-d3-html-with-dash-components）

源自stack的一位大哥的回答，参考官方文档https://dash.plotly.com/external-resources（在你的Dash中添加css和js），大概意思是：

这是你的app.py

import dash
from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

external_script=[
    "https://d3js.org/d3.v7.min.js"
]

app = Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP],external_scripts=external_script)
app.layout = html.Div([
    html.Div(id="content",children="")
]
)


if __name__ == '__main__':
    app.run_server(debug=True)

然后这是你的js文件

window.addEventListener("load", function () {
  d3.select('#content').append("circle")
           .attr("cx","150px")
           .attr("cy","150px")
           .attr("r","150px")
           .attr("fill","gray");
});

运行结果：啥也没有

然鹅在实际运行中并没有给selection添加上圆。

然后我把.js改成

window.addEventListener("load", function () {
  console.log(d3.select('#content'))
});

然后在控制台输出结果为空，代表d3.select返回为空。

运行结果：空

第二点五种方法

在第二中方法的基础上把js改成

window.addEventListener("load", function () {
  var svg=d3.select('body').append('svg').attr('width',"1600").attr('height',"800");
svg.append("circle")
           .attr("cx","150px")
           .attr("cy","150px")
           .attr("r","150px")
           .attr("fill","gray");
});

运行结果：出来了

然后圆就加载出来了。

就是直接在js文件创建你的svg是可行的，但是它好像不能select到你用dash.html创建的的元素。我实在是不太了解，有大佬能出来解答一下吗。