我之前使用d3 v3创建了聚合物1.x自定义元素 . 我想将它们更新为聚合物3和d3 v5 .
这是一个基础聚合物3元素,我想包括d3 v5到:
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* `foo-bar`
*
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class FooBar extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]!</h2>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'foo-bar',
},
};
}
constructor() {
super();
}
ready() {
super.ready();
console.log('foo-bar is ready!');
}
}
window.customElements.define('foo-bar', FooBar);
我叫 npm install d3
如何将d3导入此PolymerElement?我使用d3有两种不同类型的聚合物元素 . 我已经完成了力和层次聚合物元素 .
我想我需要在聚合物元素中的 constructor() 或 ready() 函数中做一些事情以利用d3库 .
我正在尝试以下导入:
import 'd3/dist/d3.js';
1 回答
由于
d3
已附带ES模块 . 所以你可以根据需要import .然后你可以像往常一样使用
d3
.例:
的index.html
app.js
注意:Polymer使用Shadow DOM,普通选择器(例如
d3.select
)无法通过 .在这个例子中,我从Force-Directed Graph修改 .