在 Flutter 中构建 d3.js 小部件答案

【问题标题】：Building a d3.js widget in flutter在 Flutter 中构建 d3.js 小部件
【发布时间】：2020-11-11 12:15:31
【问题描述】：

我开始使用颤振并尝试构建一个有状态的小部件，当调用它时会显示一个 d3.js 图表。我的想法是将图表构建成有状态的小部件，并使用 changenotifier 提供程序来更新图表数据，d3.js 有漂亮的情节。

我发现了一些其他人做类似事情的其他参考......

如果我的 html 代码中已经有一个可以从我的 dart 代码中引用的元素，我可以附加到该元素上并创建我的绘图 - 就像在后一个参考中一样...

import 'dart:js' as js;
js.context['d3'].callMethod('select', [shadowRoot.querySelector('.chart')]);

我不明白的是，我如何能够在有状态小部件本身的 DOM 中创建 .chart 元素，以便从我的 dart 代码的角度来看，它只是一个 dart 小部件。

换句话说，我可以选择小部件本身的本地部件，以便我可以将生成的小部件嵌套在其他小部件中？

是否希望将 d3.js 包装在 dart 中的有状态小部件中，这是否可以通过相对封装的方式来完成？并且尝试在小部件本身内创建 html 是一种好方法吗？

【问题讨论】：

【解决方案1】：

https://pub.dev/packages/plotly_js 仅在发布时才与网络兼容。一个实际的端口会很好。

【讨论】：

【解决方案2】：

我想你能做的最好的事情就是使用flutter_webview_plugin 并在这个 web 视图中运行 javascript 代码（例如，绘制 d3.js 图表）。

【讨论】：