Question

I am following this example of a difference chart. I’ve added buttons on my page that make ajax calls to fetch new datasets, and then I redraw the difference charts. There are several difference charts on my page.

Upon redrawing, the rendering of the above/below areas becomes corrupted: x-values have both above and below areas rendered. I’m fairly certain it’s not a back-end problem, because the initial load produces a correct chart; changing a parameter messes up the redrawn chart; and going back to the default parameters and redrawing the original chart also produces a corrupted chart. In fact, I can partially make out what’s happening: the original time series is present on the new graph. It’s almost as if there are three series being graphed.

I think it has to do with .datum. I don’t fully understand how it works, since it differs from the standard enter/update/exit methods associated with .data. I’ve read the documentation, but am still confused. Some possibilities:

1. The original data is hanging around (even though I clean out the container with $('#chart').html(''))
2. The .append(g) is adding groups without removing the earlier ones.
3. The svg.append("clipPath").attr("id", "clip-below") is causing problems, since multiple nodes have the same id (even though again, I’m not sure how this could happen since I remove the nodes before the redraw).

I feel like I’m missing a lot of fundamentals here, even though I’ve spent a decent amount of time trying to understand the library. Can anyone see anything obvious, or point out some good resources for me to look at?

UPDATE: This has to do with there being two charts on the page. I noticed this when I opened the inspector and closed it. The areas of the bottom chart (the difference chart) had screwed up, and I noticed the new line that it was using to separate the above-area from the below-area looked a lot like one of the lines from the top chart.

Does anybody have experience with dependency issues/namespace collisions when drawing two charts on the same page?

Answer 1

The problem was, the id’s for the clipping paths were the same.

I would still like some more resources concerning .datum.