如何在Polymer.dart元素中嵌入D3图表? [英] How to embed a D3 chart in a Polymer.dart element?
问题描述
浏览器:Dartium版本34.0.1847.0(258268)
Browser: Dartium Version 34.0.1847.0 (258268)
我想将D3嵌入Polymer.dart元素中,我才刚刚开始理清Dart和JS的交互方式.我首先从D3入门指南如何制作酒吧的HTML5/CSS3/JS创建普通HTML页面开始图表,以确保我的D3实施在Dartium中可用.
I want to embed D3 inside Polymer.dart elements and I'm just beginning to sort out how Dart and JS interoperate. I started by creating a vanilla HTML page using HTML5/CSS3/JS from D3's introductory tutorial on how to make a bar chart to be sure my D3 implementation worked in Dartium.
然后,我将D3代码移动到自定义聚合物元素(如下所示)及其配套的dart源文件(未显示)中.如何指示D3在阴影DOM中执行选择?
I then moved the D3 code into a custom polymer element (shown below) and its companion dart source file (not shown). How do I instruct D3 to perform its selection inside the 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>
推荐答案
d3不能在shadowDOM中找到元素,但是您可以在Dart中查找该元素并将其传递给d3的select方法.
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')]);
有关Dart-JS-interop的更多信息: https://www.dartlang.org/articles/js-dart-interop/
more info about Dart-JS-interop: https://www.dartlang.org/articles/js-dart-interop/
这篇关于如何在Polymer.dart元素中嵌入D3图表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!