score:5

Accepted answer

d3 can't find elements inside a shadowDOM but you look up the element in Dart and pass it to d3's select method.

something like this (not tested)

import 'dart:js' as js;

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

more info about Dart-JS-interop: https://www.dartlang.org/articles/js-dart-interop/

score:1

I wrapped the D3 JS fragment that prints the bar chart in a function and invoked it from Dart as follows:

dart-js.html

var x = function(elt) {
  console.log('x');
  d3.select(elt)
      .selectAll("div")
      .data(data)
      .enter().append("div")
      .style("width", function (d) { return d * 10 + "px"; })
      .text(function (d) { return d; });
};

dart_js.dart

import 'package:polymer/polymer.dart';
import 'dart:js' as js;

@CustomTag('dart-js')
class DartJs extends PolymerElement {

  /* Life cycle events */
  // required -- constructor must call superclass
  DartJs.created() : super.created() {
    print("dart-js started");
  }

  @override void enteredView() {
    super.enteredView();
    print('dart_js entered');
    js.context.callMethod('x', [shadowRoot.querySelector('.chart')]);
  }
}

Related Query

More Query from same tag