Why is my SVG rendered by D3 inside a Polymer component unstyled? - css

Question

Here is a Plunker sketch of my problem.
The relevant code, containing the Polymer template and its invocation:
<link rel="import"
href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">
<dom-module id="polymer-d3-component">
<template>
<style>
#monthChart .line {
stroke: rgb(247, 150, 29);
stroke-width: 2;
fill: none;
}
#monthChart .axis {
shape-rendering: crispEdges;
}
#monthChart .x.axis line {
stroke: rgba(88, 89, 93, .12);
}
#monthChart .x.axis .minor {
stroke-opacity: .5;
}
#monthChart .x.axis path {
display: none;
}
#monthChart .y.axis line, .y.axis path {
fill: none;
stroke: rgba(88, 89, 93, .5);
}
#monthChart .axis path,
#monthChart .axis line {
fill: none;
stroke: rgba(88, 89, 93, .3);
shape-rendering: crispEdges;
}
#monthChart .axis text {
font: 10px sans-serif;
fill: rgba(88, 89, 93, .5);
}
</style>
<div id="monthChart"></div>
</template>
<script>
Polymer({
is: "polymer-d3-component",
ready: function() {
var m = [20, 20, 20, 20];
var w = 850 - m[1] - m[3];
var h = 400 - m[0] - m[2];
var data=[24509, 19466, 18004, 18381, 17312, 19926, 24761, 24815, 24333, 29117, 24527, 17478];
function formatCurrency (d) {
return "$" + d;
}
var xLabels = d3.time.scale().domain([new Date(2013, 0, 1), new Date(2013, 11, 31)]).range([0, w]);
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
var line = d3.svg.line()
.x(function(d, i) {
return x(i);
})
.y(function(d) {
return y(d);
})
var graph = d3.select(this.$.monthChart).append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + 120 + "," + m[0] + ")");
var xAxis = d3.svg.axis().scale(xLabels).ticks(d3.time.months).tickFormat(d3.time.format("%B")).tickSize(-h).tickSubdivide(true);
graph.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
var yAxisLeft = d3.svg.axis().scale(y).ticks(7).tickFormat(formatCurrency).orient("left");
graph.append("g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
graph.append("path")
.attr("d", line(data))
.attr('class', 'line');
}
})
</script>
</dom-module>
The SVG is wrong but also the styles are not being applied, as can be seen by the shapes being all black and many are not drawn correctly. If I take the SVG code and manually put it directly in the Polymer component, it works fine.
What might be going on?

Answer 1

Polymer applies styles when the template is rendered to a DOM, so DOM nodes appended by libraries later (e.g. in ready) are not styled. This is described in the manual here.
The fix is to call—
this.scopeSubtree(this.$.monthChart, true);
—at the beginning of ready. This tells Polymer to watch the given subtree for changes and apply the given styles whenever nodes appended to it by other libraries, such as D3.
Here's a fork of your Plunk with that.