在这个问题上我尝试了三种方法,弄了整整两天,终于...不能说完全解决,有一些深层次的原因我没有弄懂。
第一个方法
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");
});
运行结果:啥也没有
![](https://i-blog.csdnimg.cn/blog_migrate/e8b4436a14c934eb5bf32719420fdcdd.png)
然鹅在实际运行中并没有给selection添加上圆。
然后我把.js改成
window.addEventListener("load", function () {
console.log(d3.select('#content'))
});
然后在控制台输出结果为空,代表d3.select返回为空。
运行结果:空
![](https://i-blog.csdnimg.cn/blog_migrate/4f40fa2e71dfe921344daa1365299bca.png)
第二点五种方法
在第二中方法的基础上把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");
});
运行结果:出来了
![](https://i-blog.csdnimg.cn/blog_migrate/a4fdecbb492d112232cfbecbeaedf50d.png)
然后圆就加载出来了。
就是直接在js文件创建你的svg是可行的,但是它好像不能select到你用dash.html创建的的元素。我实在是不太了解,有大佬能出来解答一下吗。