为什么D3渲染的SVG在Polymer组件内未设置样式? [英] Why is my SVG rendered by D3 inside a Polymer component unstyled?

问题描述

这是我问题的柱塞草图.

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

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>

SVG是错误的，但是样式也未应用，这可以从全黑的形状和许多未正确绘制的形状看出.如果我使用SVG代码并将其直接直接放在Polymer组件中，则可以正常工作.

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.

可能会发生什么?

推荐答案

在将模板呈现到DOM时，聚合物会应用样式，因此以后不添加由库(例如，在ready中)附加的DOM节点的样式. 此处的手册中对此进行了说明.

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.

解决方法是致电-

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

-在ready的开头.这告诉Polymer观察给定的子树进行更改，并在其他库(例如D3)附加到它的节点上时应用给定的样式.

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

这是您的Plunk的一个分支.

这篇关于为什么D3渲染的SVG在Polymer组件内未设置样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！