Событие window.onresize удаляет данные d3 из объекта диаграммы - PullRequest
0 голосов
/ 20 марта 2020

Я создал функцию конструктора js для создания объекта диаграммы D3.

Эта функция работает при начальной загрузке. Однако я также добавил прослушиватель onresize для перерисовки диаграммы при изменении размера.

Однако, когда происходит событие изменения размера, console.log () данных, использованных для создания диаграммы, показывает, что поле dates (первое поле) - все null. Мне не удалось использовать console.log, чтобы найти, где на самом деле происходит это изменение. Данные кажутся нормальными до изменения размера и до запуска функции рисования диаграммы.

Вот jsfiddle , который в качестве полного кода. При изменении размера области просмотра диаграмма исчезает. Консоль показывает myData is null

Соответствующий код:

HTML

var firstChart = new LineChart(myData,'chart-container','chart_area','This Is A Chart',["red","yellow","blue"],"temp","date")

        //Re draw on resize
        window.onresize = function(){

            firstChart.drawChart();
            console.log(myData);
        }

DATA

    var myData = [
    {"date":20111001,"New_York":63.4,"San_Francisco":62.7,"Austin":72.2},
    {"date":20111002,"New_York":58,"San_Francisco":59.9,"Austin":67.7},
    {"date":20111003,"New_York":53.3,"San_Francisco":59.1,"Austin":69.4},
    {"date":20111004,"New_York":55.7,"San_Francisco":58.8,"Austin":68},
    {"date":20111005,"New_York":64.2,"San_Francisco":58.7,"Austin":72.4},
    {"date":20111006,"New_York":58.8,"San_Francisco":57,"Austin":77},
    {"date":20111007,"New_York":57.9,"San_Francisco":56.7,"Austin":82.3},
    {"date":20111008,"New_York":61.8,"San_Francisco":56.8,"Austin":78.9},
    {"date":20111009,"New_York":69.3,"San_Francisco":56.7,"Austin":68.8},
    {"date":20111010,"New_York":71.2,"San_Francisco":60.1,"Austin":68.7},
    {"date":20111011,"New_York":68.7,"San_Francisco":61.1,"Austin":70.3},
    {"date":20111012,"New_York":61.8,"San_Francisco":61.5,"Austin":75.3},
    {"date":20111013,"New_York":63,"San_Francisco":64.3,"Austin":76.6},
    {"date":20111014,"New_York":66.9,"San_Francisco":67.1,"Austin":66.6},
    {"date":20111015,"New_York":61.7,"San_Francisco":64.6,"Austin":68},
    {"date":20111016,"New_York":61.8,"San_Francisco":61.6,"Austin":70.6},
    {"date":20111017,"New_York":62.8,"San_Francisco":61.1,"Austin":71.1},
    {"date":20111018,"New_York":60.8,"San_Francisco":59.2,"Austin":70},
    {"date":20111019,"New_York":62.1,"San_Francisco":58.9,"Austin":61.6},
    {"date":20111020,"New_York":65.1,"San_Francisco":57.2,"Austin":57.4},
    {"date":20111021,"New_York":55.6,"San_Francisco":56.4,"Austin":64.3}
]

При изменении размера даты все столбцы null

JS

function LineChart(data,chartContainerID,chartAreaId,chartTitle,colorArray,yaxisLabel,xaxisLabel,legend,yaxisFormat, marginsDict){

        this.data = data;
        this.chartContainer = document.getElementById(chartContainerID)
        this.chartArea = document.getElementById(chartAreaId);
        this.chartTitle = chartTitle;
        this.colors = colorArray;
        this.yaxisLabel=yaxisLabel;
        this.xaxisLabel=xaxisLabel;
        this.isLegend = legend;
        this.yaxisFormat= yaxisFormat;
        this.margins = marginsDict;

///....more code here in js fiddle.....


this.drawChart = function(){


///....more code here in js fiddle.....


///Console leads me here. more code above it
   var items = color.domain().map(function(name) {

          return {
            name: name,
            values: data.map(function(d) {
                console.log(d)
              return {
                date: d.date,
                result: +d[name]
              };
            })
          };
        });

///....more code here in js fiddle.....

}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...