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

Question

浏览器：Dartium 版本 34.0.1847.0 (258268)

我想将 D3 嵌入到 Polymer.dart 元素中，我才刚刚开始理清 Dart 和 JS 的互操作方式。我首先使用 D3 的介绍性教程中的 HTML5/CSS3/JS 创建一个普通的 HTML 页面，该教程关于如何制作条形图以确保我的 D3 实现在 Dartium 中工作。

然后我将 D3 代码移动到自定义聚合物元素（如下所示）及其配套的 dart 源文件（未显示）中。如何指示 D3 在 shadow 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>

Answer 1

d3 无法在 shadowDOM 中找到元素，但您可以在 Dart 中查找该元素并将其传递给 d3 的 select 方法。

像这样（未测试）

import 'dart:js' as js;

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

关于 Dart-JS-interop 的更多信息：https : //www.dartlang.org/articles/js-dart-interop/