如何在 Polymer 2.0 类中使用 d3 v4？

Question

d3.js (v4) 如何与 Polymer 2.0 元素一起使用？
或者如何在 class 中使用已经扩展了另一个 class 的库？

尝试创建聚合物 d3 元素以利用聚合物的双向数据绑定和 d3 的语法和功能。以便数据可以绑定到聚合物属性并传递给 d3.data() 函数？

目前正在 class returns 中声明 d3 未定义。 class 是否需要以 d3 作为参数进行实例化？它似乎适用于 Polymer 1.0。另一种方法是在 class 之外创建一个函数并调用它，但它很丑陋。最好在 class 中使用 d3。

或者有更清洁更好的方法吗？

例如

<script src="../../bower_components/d3/d3.js"></script>
var d3 = d3; 
debugger; // hits this breakpoint first, and d3 is defined here and below 
<dom-module id="my-app">
  <template>
     <svg id="svg"></svg>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          data: {
            type: Object,
            observer: '_dataChanged'
          }
        }
      }

      ready: {
        var d3 = d3;  // when it breaks here on the above breakpoint this is defined
        debugger;  // when it hits this breakpoint 2nd, d3 is undefined here and outside the class; what happened? how to scope it in?
      }

      _dataChanged(newValue, oldValue): {
        var circle = d3.select(this.$.svg).data(newValue).enter().append(circle);  //d3 undefined(! how to define?)
      }

    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

Answer 1

window.d3 是您在全局范围内加载脚本的方式。您可以异步或同步加载任何外部脚本。

要同步加载，只需将 <script> 标签放在 <head>.

要异步加载它，您可以在 <script> 标记中添加一个 load 事件侦听器，以便在加载完成后执行后续操作。

如何在 Polymer 2.0 类中使用 d3 v4？

How to use d3 v4 with Polymer 2.0 classes?

d3.js

ecmascript-6

polymer

es6-class

polymer-2.x

如何在 Polymer 2.0 类 中使用 d3 v4？

How to use d3 v4 with Polymer 2.0 classes?

d3.js

ecmascript-6

polymer

es6-class

polymer-2.x

如何在 Polymer 2.0 类中使用 d3 v4？