CODEWITHSUNDEEP
javascriptjqueryd3.jspolymercubism.js
user736893
user736893

Reputation:

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?

Upvotes: 1

Views: 330

Answers (2)

Manas
Manas

Reputation: 958

In order to select a shadow DOM element(with an id, class, etc) in Polymer using D3V5, you can simply do following:

<div id="example"></div>

d3.select(this.$.example)

Upvotes: 0

user736893
user736893

Reputation:

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.

Upvotes: 2

Related Questions