Building a d3.js widget in flutter

Question

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...

Dart js interop with D3

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?

Answer 1

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.