无法在 Polymer 中获取 d3 的元素

Question

我正在尝试实施 cubism and I'm using d3.js v2 in my polymer 组件。第一步是为图表选择 DOM 元素：

d3.select("#example1").call(function(div) {
...    
});

returns cubism.v1.js 的第 1205 行出现以下错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

检查代码后，div 对象没有 ID，innerHtml 值是我的 html 的 all（以<head> 并以 </body> 结尾）。

我假设这是由于代码运行后的聚合物渲染 <div id='example1'></div>，但我不确定。我尝试将 select 语句放在 <dom-module> 下它自己的 <script> 标记和 Polymer.ready 函数中。两者的结果相同。

我该如何解决这个问题？

Answer 1

我可以通过更改以下内容来解决问题：

d3.select("#example1").call(function(div) { .. }

对此：

var chart = self.$$('#example1');
d3.select(chart).call(function(div) { ... }

如此处 Automatic node finding 下所述。

Answer 2

为了在使用 D3V5 的 Polymer 中 select 阴影 DOM 元素（带有 id，class 等），您可以简单地执行以下操作：

<div id="example"></div>

d3.select(this.$.example)

Trouble getting element for d3 in Polymer