Building a d3.js widget in flutter
I guess the best you could do is to use flutter_webview_plugin and run javascript code (for example, draw d3.js chart) inside this webview.
Flaminator
Updated on December 22, 2022Comments
-
Flaminator over 1 year
I'm getting started with flutter and trying build a Stateful Widget, which when called would display a d3.js chart. My thinking is to build a chart into a stateful widget and use the changenotifier provider to update the chart data, and d3.js has beautiful plots.
I've found a couple of other references of other people doing similar things...
How to embed a D3 chart in a Polymer.dart element?.
It seems to make sense that if I already had an element in my html code that I could reference from my dart code I could attach to that, and create my plot - as in the latter reference...
import 'dart:js' as js; js.context['d3'].callMethod('select', [shadowRoot.querySelector('.chart')]);
What I don't understand, is how I would be able to create that .chart element in the DOM within my stateful widget itself so that from the perspective of my dart code, it sees it as just a dart widget.
Put another way, what is it than I can select that is local to the widget itself so that I can nest the resulting widget in other widgets?
Is wanting to wrap the d3.js in a stateful widget in dart something that could be accomplished in a relatively encapsulated way? And is trying to create the html within the widget itself a good approach?