D3.js 如何在Polymer.dart元素中嵌入D3图表？

浏览器：Dartium版本34.0.1847.0 258268

我想在Polymer.dart元素中嵌入D3，我刚刚开始整理dart和JS是如何互操作的。我首先使用D3的入门教程中的HTML5/CSS3/JS创建了一个普通HTML页面，以确保我的D3实现在Dartium中工作

然后，我将D3代码移动到如下所示的自定义聚合元素中，其附带的dart源文件未显示。如何指示D3在阴影DOM中执行其选择

<!-- D3 code copied from: http://bost.ocks.org/mike/bar/ -->
<polymer-element name="dart-js">
    <template>
        <!-- D3 style -->
        <style>
            .chart div {
                font: 10px sans-serif;
                background-color: steelblue;
                text-align: right;
                padding: 3px;
                margin: 1px;
                color: white;
            }
        </style>

        <content>
            <!-- D3 container -->
            <div class="chart">inside dart-js shadow-root</div>

            <!-- D3 JS -->
            <script type="application/javascript">
                console.log("inside content");

                var data = [4, 8, 15, 16, 23, 42];
                console.log("data: " + data); // data: 4,8,15,16,23,42

                console.log("select: <" + d3.select(".chart") + ">"); // select: <>

                // How do I instruct d3 to search inside the shadow DOM?
                d3.select(".chart")
                        .selectAll("div")
                        .data(data)
                        .enter().append("div")
                        .style("width", function (d) { return d * 10 + "px"; })
                        .text(function (d) { return d; })

            </script>
        </content>

    </template>
    <script type="application/dart;component=1" src="dart_js.dart"></script>
</polymer-element>

---

d3在阴影中找不到元素，但可以在Dart中查找元素并将其传递给d3的select方法

像这样的东西没有经过测试

将“dart:js”导入为js； js.context['d3'].callMethod'select'，[shadowRoot.querySelector.chart']； 有关Dart JS互操作的更多信息：

---

我将打印条形图的D3 JS片段包装在函数中，并从Dart调用它，如下所示：

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; });
};

飞镖

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')]);
  }
}

---

那会有帮助的。我看过你在Dart网站开发文档上的帖子。这两种技术是一种强大的组合。有没有人写过关于如何集成它们的教程？我添加了一个链接，你可能已经知道了。我不知道有人在写这方面的文档，但除了我在帖子、问题中看到的内容之外，我对Dart团队正在做什么没有什么特别的了解……谢谢。对解决方案的一个小更正：callMethod的第二个参数需要一个列表-callMethod'select'，[shadowRoot.querySelector.chart']。我将在下面的答案中添加一个更完整的描述。你是对的。我知道这一点，但忘了添加[]