Javascript window.onresize事件从图表对象中删除d3数据
我已经创建了一个js构造函数来创建一个D3图表对象 该功能似乎在初始负载下工作。但是,我还添加了一个Javascript window.onresize事件从图表对象中删除d3数据,javascript,d3.js,constructor,window-resize,Javascript,D3.js,Constructor,Window Resize,我已经创建了一个js构造函数来创建一个D3图表对象 该功能似乎在初始负载下工作。但是,我还添加了一个onresize侦听器,用于在resize上重新绘制图表 但是,当发生调整大小事件时,用于制作图表的数据的console.log()会显示日期字段(第一个字段)全部为空。我没有成功地使用console.log来查找此更改实际发生的位置。在调整大小和运行图表绘制功能之前,数据似乎正常 这里有一个,作为完整的代码。调整视口大小时,图表将消失。控制台显示myDataisnull 相关代码: HTML 资
onresize
侦听器,用于在resize上重新绘制图表
但是,当发生调整大小事件时,用于制作图表的数据的console.log()会显示日期
字段(第一个字段)全部为空
。我没有成功地使用console.log来查找此更改实际发生的位置。在调整大小和运行图表绘制功能之前,数据似乎正常
这里有一个,作为完整的代码。调整视口大小时,图表将消失。控制台显示myData
isnull
相关代码:
HTML
资料
调整日期列的大小时,日期列为allnull
JS
console
会引导您到达那里,因为color
未定义?看不到代码。这是一个示例。JSFIDLE有完整的代码,很长。应该定义颜色,因为您正在尝试解析已解析的值。只需在构造函数中执行此操作,而不是在drawChart方法中。投票以“对未来的读者没有帮助”结束。我明白了。非常感谢。我没有意识到解析器改变了实际对象
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);
}
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}
]
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.....
}
}