开发者问题收集

调整大小时重新创建 D3 多线图(响应式)

2018-11-29
553

为了具有响应式D3多行图,我添加了一个调整大小函数,但是尽管该函数被调用:

774199900

in片段,我尝试了两种方法来做到这一点。它们都没有使图表从头开始重新创建。此 jsfiddle 。 。

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 并重新附加到主体,所有配置都多次完成。以下是我的做法:

  1. 解析数据,将初始高度和宽度附加到 svg, 仅一次 附加 X、Y 轴,但将 drawBars (用于绘制实际的条形图)移动到单独的函数,该函数将使用 d3 自己的 进入、退出和更新 选择逻辑。
  2. 在调整窗口大小时,只需更改 SVG 的高度和宽度,通过 .call(xAxis)... 重新渲染轴,然后调用 drawBars 函数即可。

希望对您有所帮助。

Shashank
2018-11-29