0

我正在关注这个差异图表的例子。我在我的页面上添加了一些按钮,这些按钮可以进行 ajax 调用以获取新数据集,然后我重新绘制了差异图表。我的页面上有几个不同的图表。

重绘时,上方/下方区域的渲染会损坏:x 值同时渲染上方和下方区域。我相当肯定这不是后端问题,因为初始加载会生成正确的图表;更改参数会弄乱重绘图表;并返回默认参数并重新绘制原始图表也会产生损坏的图表。事实上,我可以部分弄清楚发生了什么:原始时间序列出现在新图表上。就好像绘制了三个系列一样。

我认为这与.datum 有关。我不完全理解它是如何工作的,因为它不同于与 .data 关联的标准输入/更新/退出方法。我已经阅读了文档,但仍然感到困惑。一些可能性:

  1. 原始数据到处都是(即使我用 清理了容器$('#chart').html('')
  2. .append(g)是添加组而不删除较早的组。
  3. svg.append("clipPath").attr("id", "clip-below")导致了问题,因为多个节点具有相同的 id(尽管如此,我不确定这会如何发生,因为我在重绘之前删除了节点)。

我觉得我在这里遗漏了很多基础知识,尽管我花了很多时间试图理解这个库。任何人都可以看到任何明显的东西,或者指出一些好的资源供我查看吗?

更新:这与页面上有两个图表有关。当我打开检查器并关闭它时,我注意到了这一点。底部图表(差异图表)的区域搞砸了,我注意到它用来将上方区域与下方区域分开的新线看起来很像顶部图表中的一条线。

在同一页面上绘制两个图表时,是否有人遇到过依赖问题/命名空间冲突?

4

1 回答 1

0

问题是,剪切路径的 id 是相同的。

我仍然想要更多关于 .datum 的资源。

于 2013-01-21T02:29:42.833 回答