在Flutter中构建一个d3.js小部件

Question

我正在学习Flutter，并尝试构建一个有状态小部件，调用时会显示一个d3.js图表。我的想法是将图表构建到有状态小部件中，并使用changenotifier提供程序来更新图表数据，而d3.js具有美丽的绘图功能。

我发现其他人也在做类似的事情... Dart js interop with D3 如何在Polymer.dart元素中嵌入D3图表？ 如果我已经有一个html代码中的元素可以从我的dart代码引用，那么我似乎可以连接到它并创建我的图表 - 就像后面的参考资料中所述。

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

我不理解的是，如何在我的有状态小部件中创建DOM中的.chart元素，以便从我的Dart代码的角度来看，它只是一个Dart小部件。

换句话说，有什么可以选择的是本地于小部件本身的，以便我可以将结果小部件嵌套在其他小部件中？

想要在Dart的有状态小部件中包装d3.js是否可以以相对封闭的方式完成？尝试在小部件本身中创建html是一个好的方法吗？

- Flaminator

---

嘿Flaminator，你能找到任何解决方案吗？ - Abbas Jafari

很遗憾，我没有这样做。结果，我最终选择了Vue.js而不是Flutter来完成这个项目。 - Flaminator

Answer 1

我想最好的方法是使用 flutter_webview_plugin 并在此 Webview 中运行 JavaScript 代码（例如，绘制 d3.js 图表）。

- Evgeniy Dubskiy

Answer 2

https://pub.dev/packages/plotly_js 在发布时只支持 Web，实际的移植版本会更好。

- 0llie