浏览器:Dartium 版本 34.0.1847.0 (258268)
我想将 D3 嵌入到 Polymer.dart 元素中,并且我刚刚开始理清 Dart 和 JS 如何互操作。我首先使用 D3 的介绍性教程 how to make a bar chart 中的 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 无法在 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/
关于d3.js - 如何在 Polymer.dart 元素中嵌入 D3 图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23487606/