在 Polymer 中获取 d3 的元素时遇到问题答案

【问题标题】：Trouble getting element for d3 in Polymer在 Polymer 中获取 d3 的元素时遇到问题
【发布时间】：2017-02-23 01:24:43
【问题描述】：

我正在尝试实现cubism，并且在我的polymer 组件中使用d3.js v2。第一步是为图表选择 DOM 元素：

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

这会在cubism.v1.js 的第 1205 行返回以下错误：

未捕获的类型错误：无法读取 null 的属性“appendChild”

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

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

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

我可以通过改变这个来解决这个问题：

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

到这里：

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

【讨论】：

【解决方案2】：

为了使用 D3V5 在 Polymer 中选择影子 DOM 元素（带有 id、类等），您可以简单地执行以下操作：

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

d3.select(this.$.example)

【讨论】：