在 flutter 中构建 d3.js 小部件

Question

我正在开始使用 flutter 并尝试构建一个有状态的小部件，它在被调用时会显示一个 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 是一种好方法吗？

Answer 1

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