我关注this example of a difference chart。我在我的页面上添加了按钮,用于调用ajax以获取新数据集,然后重绘差异图表。我的页面上有几个不同的图表。
重绘时,上/下区域的渲染会被破坏:x值在渲染区域的上方和下方都有。我很确定这不是一个后端问题,因为初始加载产生了一个正确的图表;更改参数会弄乱重绘图表;并返回默认参数并重新绘制原始图表也会产生损坏的图表。事实上,我可以部分地弄清楚发生了什么:原始时间序列出现在新图表上。这几乎就像有三个系列被绘制出来一样。
我认为这与.datum有关。我不完全理解它是如何工作的,因为它不同于与.data相关的标准输入/更新/退出方法。我读过the documentation,但我仍感到困惑。一些可能性:
$('#chart').html('')
清除容器).append(g)
正在添加群组而不删除之前的群组。svg.append("clipPath").attr("id", "clip-below")
导致问题,因为多个节点具有相同的ID(即使再次,我不确定这是如何发生的,因为我在重绘之前删除了节点)。我觉得我在这里缺少很多基础知识,尽管我花了相当多的时间来试图理解这个库。任何人都可以看到任何明显的东西,或者指出一些好的资源供我查看吗?
更新:这与页面上有两个图表有关。当我打开检查员并关闭它时,我注意到了这一点。底部图表的区域(差异图表)搞砸了,我注意到用于将上面区域与下面区域分开的新线条看起来很像顶部图表中的一条线条。
在同一页面上绘制两个图表时,是否有人遇到依赖性问题/命名空间冲突?
答案 0 :(得分:0)
问题是,裁剪路径的id是相同的。
我仍然想了解更多关于.datum的资源。