cleaning axis in dynamic charts in dimple.js - d3.js

Question

I'm using the clean axis function courtesy of #JohnKiernander. This works fine with static charts. But when I have a chart that updates (in this example when a button in clicked), the clean axis function does not work as expected. The function also erases others numbers of the axis. Is there a way to make this function work with dynamic charts? or do I have to take another approach?
See fiddle: http://jsfiddle.net/jdash99/oba54L1a/ for a better explanation.
// Clean Axis Function for reference
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = 0;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text").each(function (d) {
// Remove all but the nth label
if (del % oneInEvery !== 0) {
this.remove();
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
del += 1;
});
}
}
};

Answer 1

I suggest switching to a method with sets opacity rather than removing the label completely. I've modified your fiddle in 2 ways. Firstly the clean axis method becomes:
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = 0;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text").each(function (d) {
d3.select(this).attr("opacity", 1);
// Remove all but the nth label
if (del % oneInEvery !== 0) {
d3.select(this).attr("opacity", 0);
}
del += 1;
});
}
}
};
also because you are animating the draws you can't draw cleanAxis straight after, you need to assign it to the afterDraw property of the series instead:
s.afterDraw = function () { cleanAxis(myAxis, 10); };
This avoids a race condition on the label creation/hiding.
Here's the updated fiddle: http://jsfiddle.net/oba54L1a/2/