为什么我的 SVG 在 Polymer 组件内由 D3 渲染，没有样式？

这里有一个Plunker我的问题的草图 http://plnkr.co/7hW5Rp71Qy1IwptZx4i6.

相关代码，包含 Polymer 模板及其调用：

<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>

SVG 是错误的，而且样式也没有被应用，从形状全黑可以看出，许多形状没有正确绘制。如果我将 SVG 代码手动直接放入 Polymer 组件中，则效果很好。

可能发生了什么？

当模板渲染到 DOM 时，Polymer 会应用样式，因此库稍后会附加 DOM 节点（例如，在ready) 没有样式。这是描述的在此处的手册中 https://www.polymer-project.org/1.0/docs/devguide/styling.html#scope-subtree.

解决办法是调用——

this.scopeSubtree(this.$.monthChart, true);

-在。。。之初ready。这告诉 Polymer 观察给定子树的更改，并在其他库（例如 D3）向其附加节点时应用给定样式。

这是你的 Plunk 的一个分支。 http://plnkr.co/edit/NJIWcojYMYNLG7AW9Y0c