2

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

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

目前在类中声明 d3 会返回 undefined。该类是否需要以 d3 作为参数进行实例化？它似乎适用于 Polymer 1.0。另一种方法是在类之外创建一个函数并调用它，但它很难看。在课堂上使用 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>
4

1 回答 1

1

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

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

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

于 2017-04-01T13:22:16.643 回答