Rects Won't Show Up On D3 Histogram

I'm using Polymer to render some d3 charts. When the Polymer is initially rendered I only draw a graph with axes and no data, since the data comes later once the API calls succeed.

Solution 1:

In your ready function, you are grabbing your div creating an svg element adding a g element and then appending your axis to that g.

In your dataChanged function, you are grabbing your div and appending rects to it.

See the disconnect? You can't parent svg to HTML.

In ready do this:

var svg = d3.select(this.$.chart).append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("id", "canvas")
   .attr("transform",
         "translate(" + margin.left + "," + margin.top + ")");

In dataChanged:

var svg = d3.select("#canvas");

This will allow you to "find" the appropriate g to append your rects to.