Obter acesso a uma variável que está numa etiqueta "molde" em polímero

votos
0

* Olá, eu quero fazer um cronograma ágil usando D3.js e Polymer, mas eu tenho um problema. Eu tenho declarado um tag div como este:

<section flex flex-full-center>
    <div id=chart> </div>
</section>

E eu quero começar a minha div com esta linha:

const element = document.getElementById(chart);

Ele me esta mensagem de erro faz com que eu coloquei meu código aqui. (desculpe pelo meu Inglês, eu sou francês). O meu-timeline.html arquivo:

    <link rel=import href=../bower_components/polymer/polymer.html>
<link rel=import href=../bower_components/paper-slider/paper-slider.html>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css />
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css />
<link rel=stylesheet href=https://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css />
<link rel=stylesheet href=../dist/timeline-chart.css />
<link rel=stylesheet href=style.css />
<script src=https://d3js.org/d3.v5.min.js></script>

<script type=text/javascript src=../dist/timeline-chart.js></script>

<dom-module id=my-timeline>
  <!-- Defines the element's style and local DOM -->
  <template>

    <style>
      :host {
        display: block;

        padding: 16px;
      }
    </style>

    <h1> Timeline - D3.js </h1>

    <paper-slider min=-100 max=100 value=50> </paper-slider>

    <section flex flex-full-center>
        <div id=chart> </div>
    </section>

  </template>




    <script id=code>

        'use strict';

        // const element = this.$.chart;
        // const element = d3.select(this.$.chart);
        const element = document.getElementById(chart);


        const data = [{
            label: 'Name',
            data: [{
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 5, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 6, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 7, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 8, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 9, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 10, 1]),
                customClass: 'blue-dot'
            }]
        }, {
            label: 'Type',
            data: [{
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 5, 11])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 5, 15])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 7, 10])
            }, {
                label: 'I\'m a label with a custom class',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2016, 6, 1]),
                to: new Date([2016, 7, 1]),
                customClass: 'blue-interval'
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 10, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2016, 11, 1])
            }]
        }, {
            label: 'Imp',
            data: [{
                label: 'Label 1',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2016, 5, 15]),
                to: new Date([2016, 7, 1])
            }, {
                label: 'Label 2',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2016, 8, 1]),
                to: new Date([2016, 9, 12])
            }]
        }];

        const timeline = new TimelineChart(element, data, {
            enableLiveTimer: true,
            tip: function(d) {
                return d.at || `${d.from}<br>${d.to}`;
            }
        }).onVizChange(e => console.log(e));

  </script>

  <!-- Creates the element's prototype and registers it -->
  <script>
    Polymer({
      is: 'my-timeline'
    });
  </script>


</dom-module>

o cronograma-chart.js arquivo:

(function (global, factory) {
    if (typeof define === function && define.amd) {
        define(['module'], factory);
    } else if (typeof exports !== undefined) {
        factory(module);
    } else {
        var mod = {
            exports: {}
        };
        factory(mod);
        global.TimelineChart = mod.exports;
    }
})(this, function (module) {
    'use strict';

    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError(Cannot call a class as a function);
        }
    }

    var _createClass = function () {
        function defineProperties(target, props) {
            for (var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if (value in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor);
            }
        }

        return function (Constructor, protoProps, staticProps) {
            if (protoProps) defineProperties(Constructor.prototype, protoProps);
            if (staticProps) defineProperties(Constructor, staticProps);
            return Constructor;
        };
    }();

    var TimelineChart = function () {
        function TimelineChart(element, data, opts) {
            _classCallCheck(this, TimelineChart);

            var self = this;

            element.classList.add('timeline-chart'); /* PROBLEME */

            var options = this.extendOptions(opts);

            var allElements = data.reduce(function (agg, e) {
                return agg.concat(e.data);
            }, []);

            var minDt = d3.min(allElements, this.getPointMinDt);
            var maxDt = d3.max(allElements, this.getPointMaxDt);

            var elementWidth = options.width || element.clientWidth;
            var elementHeight = options.height || element.clientHeight;

            var margin = {
                top: 0,
                right: 0,
                bottom: 20,
                left: 0
            };

            var width = elementWidth - margin.left - margin.right;
            var height = elementHeight - margin.top - margin.bottom;

            var groupWidth = options.hideGroupLabels ? 0 : 200;

            var x = d3.time.scale().domain([minDt, maxDt]).range([groupWidth, width]);

            var xAxis = d3.svg.axis().scale(x).orient('bottom').tickSize(-height);

            var zoom = d3.behavior.zoom().x(x).on('zoom', zoomed);

            var svg = d3.select(element).append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')').call(zoom);

            svg.append('defs').append('clipPath').attr('id', 'chart-content').append('rect').attr('x', groupWidth).attr('y', 0).attr('height', height).attr('width', width - groupWidth);

            svg.append('rect').attr('class', 'chart-bounds').attr('x', groupWidth).attr('y', 0).attr('height', height).attr('width', width - groupWidth);

            svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis);

            if (options.enableLiveTimer) {
                self.now = svg.append('line').attr('clip-path', 'url(#chart-content)').attr('class', 'vertical-marker now').attr(y1, 0).attr(y2, height);
            }

            var groupHeight = height / data.length;
            var groupSection = svg.selectAll('.group-section').data(data).enter().append('line').attr('class', 'group-section').attr('x1', 0).attr('x2', width).attr('y1', function (d, i) {
                return groupHeight * (i + 1);
            }).attr('y2', function (d, i) {
                return groupHeight * (i + 1);
            });

            if (!options.hideGroupLabels) {
                var groupLabels = svg.selectAll('.group-label').data(data).enter().append('text').attr('class', 'group-label').attr('x', 0).attr('y', function (d, i) {
                    return groupHeight * i + groupHeight / 2 + 5.5;
                }).attr('dx', '0.5em').text(function (d) {
                    return d.label;
                });

                var lineSection = svg.append('line').attr('x1', groupWidth).attr('x2', groupWidth).attr('y1', 0).attr('y2', height).attr('stroke', 'black');
            }

            var groupIntervalItems = svg.selectAll('.group-interval-item').data(data).enter().append('g').attr('clip-path', 'url(#chart-content)').attr('class', 'item').attr('transform', function (d, i) {
                return 'translate(0, ' + groupHeight * i + ')';
            }).selectAll('.dot').data(function (d) {
                return d.data.filter(function (_) {
                    return _.type === TimelineChart.TYPE.INTERVAL;
                });
            }).enter();

            var intervalBarHeight = 0.8 * groupHeight;
            var intervalBarMargin = (groupHeight - intervalBarHeight) / 2;
            var intervals = groupIntervalItems.append('rect').attr('class', withCustom('interval')).attr('width', function (d) {
                return Math.max(options.intervalMinWidth, x(d.to) - x(d.from));
            }).attr('height', intervalBarHeight).attr('y', intervalBarMargin).attr('x', function (d) {
                return x(d.from);
            });

            var intervalTexts = groupIntervalItems.append('text').text(function (d) {
                return d.label;
            }).attr('fill', 'white').attr('class', withCustom('interval-text')).attr('y', groupHeight / 2 + 5).attr('x', function (d) {
                return x(d.from);
            });

            var groupDotItems = svg.selectAll('.group-dot-item').data(data).enter().append('g').attr('clip-path', 'url(#chart-content)').attr('class', 'item').attr('transform', function (d, i) {
                return 'translate(0, ' + groupHeight * i + ')';
            }).selectAll('.dot').data(function (d) {
                return d.data.filter(function (_) {
                    return _.type === TimelineChart.TYPE.POINT;
                });
            }).enter();

            var dots = groupDotItems.append('circle').attr('class', withCustom('dot')).attr('cx', function (d) {
                return x(d.at);
            }).attr('cy', groupHeight / 2).attr('r', 5);

            if (options.tip) {
                if (d3.tip) {
                    var tip = d3.tip().attr('class', 'd3-tip').html(options.tip);
                    svg.call(tip);
                    dots.on('mouseover', tip.show).on('mouseout', tip.hide);
                } else {
                    console.error('Please make sure you have d3.tip included as dependency (https://github.com/Caged/d3-tip)');
                }
            }

            zoomed();

            if (options.enableLiveTimer) {
                setInterval(updateNowMarker, options.timerTickInterval);
            }

            function updateNowMarker() {
                var nowX = x(new Date());

                self.now.attr('x1', nowX).attr('x2', nowX);
            }

            function withCustom(defaultClass) {
                return function (d) {
                    return d.customClass ? [d.customClass, defaultClass].join(' ') : defaultClass;
                };
            }

            function zoomed() {
                if (self.onVizChangeFn && d3.event) {
                    self.onVizChangeFn.call(self, {
                        scale: d3.event.scale,
                        translate: d3.event.translate,
                        domain: x.domain()
                    });
                }

                if (options.enableLiveTimer) {
                    updateNowMarker();
                }

                svg.select('.x.axis').call(xAxis);

                svg.selectAll('circle.dot').attr('cx', function (d) {
                    return x(d.at);
                });
                svg.selectAll('rect.interval').attr('x', function (d) {
                    return x(d.from);
                }).attr('width', function (d) {
                    return Math.max(options.intervalMinWidth, x(d.to) - x(d.from));
                });

                svg.selectAll('.interval-text').attr('x', function (d) {
                    var positionData = getTextPositionData.call(this, d);
                    if (positionData.upToPosition - groupWidth - 10 < positionData.textWidth) {
                        return positionData.upToPosition;
                    } else if (positionData.xPosition < groupWidth && positionData.upToPosition > groupWidth) {
                        return groupWidth;
                    }
                    return positionData.xPosition;
                }).attr('text-anchor', function (d) {
                    var positionData = getTextPositionData.call(this, d);
                    if (positionData.upToPosition - groupWidth - 10 < positionData.textWidth) {
                        return 'end';
                    }
                    return 'start';
                }).attr('dx', function (d) {
                    var positionData = getTextPositionData.call(this, d);
                    if (positionData.upToPosition - groupWidth - 10 < positionData.textWidth) {
                        return '-0.5em';
                    }
                    return '0.5em';
                }).text(function (d) {
                    var positionData = getTextPositionData.call(this, d);
                    var percent = (positionData.width - options.textTruncateThreshold) / positionData.textWidth;
                    if (percent < 1) {
                        if (positionData.width > options.textTruncateThreshold) {
                            return d.label.substr(0, Math.floor(d.label.length * percent)) + '...';
                        } else {
                            return '';
                        }
                    }

                    return d.label;
                });

                function getTextPositionData(d) {
                    this.textSizeInPx = this.textSizeInPx || this.getComputedTextLength();
                    var from = x(d.from);
                    var to = x(d.to);
                    return {
                        xPosition: from,
                        upToPosition: to,
                        width: to - from,
                        textWidth: this.textSizeInPx
                    };
                }
            }
        }

        _createClass(TimelineChart, [{
            key: 'extendOptions',
            value: function extendOptions() {
                var ext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

                var defaultOptions = {
                    intervalMinWidth: 8, // px
                    tip: undefined,
                    textTruncateThreshold: 30,
                    enableLiveTimer: false,
                    timerTickInterval: 1000,
                    hideGroupLabels: false
                };
                Object.keys(ext).map(function (k) {
                    return defaultOptions[k] = ext[k];
                });
                return defaultOptions;
            }
        }, {
            key: 'getPointMinDt',
            value: function getPointMinDt(p) {
                return p.type === TimelineChart.TYPE.POINT ? p.at : p.from;
            }
        }, {
            key: 'getPointMaxDt',
            value: function getPointMaxDt(p) {
                return p.type === TimelineChart.TYPE.POINT ? p.at : p.to;
            }
        }, {
            key: 'onVizChange',
            value: function onVizChange(fn) {
                this.onVizChangeFn = fn;
                return this;
            }
        }]);

        return TimelineChart;
    }();

    TimelineChart.TYPE = {
        POINT: Symbol(),
        INTERVAL: Symbol()
    };

    module.exports = TimelineChart;
});
// # sourceMappingURL=timeline-chart.js.map

A questão principal é que eu não posso ter acesso ao meu tag div (com o nome chart ).

Publicado 19/04/2018 em 12:27
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more