调整大小时重新创建 D3 多线图(响应式)
2018-11-29
553
1个回答
每次调整窗口大小时,都会出现数据解析问题。
由于数据中的
日期
是第一次解析的,因此调用
parseDate(d.date)
会在每次调用时失败,因为它已被解析为有效日期。你明白了吗?
因此,移动解析代码,使其只执行一次:
// parse data just once
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
Fiddle 链接: https://jsfiddle.net/a5rqt0L1/
建议: 我觉得这不是制作响应式图表的正确方法,即删除 SVG 并重新附加到主体,所有配置都多次完成。以下是我的做法:
-
解析数据,将初始高度和宽度附加到 svg,
仅一次
附加 X、Y 轴,但将
drawBars
(用于绘制实际的条形图)移动到单独的函数,该函数将使用 d3 自己的 进入、退出和更新 选择逻辑。 -
在调整窗口大小时,只需更改 SVG 的高度和宽度,通过
.call(xAxis)...
重新渲染轴,然后调用drawBars
函数即可。
希望对您有所帮助。
Shashank
2018-11-29