cleaning axis in dynamic charts in dimple.js

问题

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;
            });
        }
    }
};

回答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/

来源：https://stackoverflow.com/questions/25312940/cleaning-axis-in-dynamic-charts-in-dimple-js

标签

d3.js

dimple.js