2

How can d3.js (v4) be used with a Polymer 2.0 element?
Or how to use a library inside a class that already extends another class?

Trying to create a polymer d3 element to take advantage of polymer's two-way data binding and d3's syntax and functions. So that the data can be bound to a polymer property and passed to the d3.data() function?

Currently declaring d3 in the class returns undefined. Does the class need to be instantiated with d3 as a parameter? It seemed to work with Polymer 1.0. Another approach was to create a function outside of the class and call that but it's ugly. It would be nice to just use d3 inside the class.

Or is there a cleaner better way?

eg.

<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>
Cliff Coulter
  • 402
  • 7
  • 20

1 Answers1

1

window.d3 is the way as you're loading the script in the global scope. You can load any external script asynchronously or synchronously.

To load it synchronously, just place the <script> tag in the <head>.

To load it asynchronously, you can add an load event listener to the <script> tag to do subsequent stuff when the load is completed.

motss
  • 662
  • 4
  • 6
  • That worked but also turns out there was an even simpler thing I could do and missed - load d3 before the my-app file gets loaded. (d'oh) – Cliff Coulter Apr 14 '17 at 13:00
  • You need to ensure that the script that runs `window.d3` must run after the `d3` script has been loaded and parsed successfully. Either use `Promise` or the `onload` event for the script: `` – motss Apr 15 '17 at 13:33