Search code examples
javascriptjqueryd3.jspolymercubism.js

Trouble getting element for d3 in Polymer

I'm trying to implement cubism and I'm using v2 in my component. The very first step is selecting the DOM element for the chart:

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

This returns the following error on line 1205 of cubism.v1.js:

Uncaught TypeError: Cannot read property 'appendChild' of null

Upon inspecting the code, the div object has no id and the innerHtml value is all of my html (starting with <head> and ending with </body>).

I'm assuming this is due to polymer rendering <div id='example1'></div> after the code runs, but I don't know for sure. I tried putting the select statement both in its own <script> tag under <dom-module> and in the Polymer.ready function. Both have the same result.

How can I fix this?

Solution

  • I was able to fix the issue by changing this:

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

    to this:

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

    As documented here under Automatic node finding.