javascript - 在dimple.js中自动缩放和格式化x轴

我想要一个根据数据大小自动缩放x轴并仅显示特定数字的图表，而其余数据点仅显示没有数字的刻度线。像这样：



在此示例中，数据的长度在75到155之间，因此它显示的数字是20的倍数。然后对于每个间隔，有5条等距的刻度线。

到目前为止，我已经可以使用此处建议的cleanAxis函数编辑刻度线：How do you reduce the number of Y-axis ticks in dimple.js?。我做了类似的事情来缩放轴：

    if (data.length < 10) {
        cleanAxis(myAxis, 2);
    }
    if (data.length >= 10 && data.length < 75) {
        cleanAxis(myAxis, 10);
    }
    if (data.length >= 75 && data.length < 155) {
        cleanAxis(myAxis, 20);
    }
    if (data.length >= 155) {
        cleanAxis(myAxis, 50);
    }

这以我想要的方式显示了数字，但同时也删除了刻度线。是否可以在dimple.js中做我想做的事情？

最佳答案

作为参考，这里是@@ JohnKiernander提供的cleanTicks函数。

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

删除行的部分在这里：

// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
    if (d === d2) {
        this.remove();
    }
});

因此，如果您希望不那么频繁地删除它，则可以执行另一次模检：

var cleanAxis = function (axis, labelEvery, tickEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // If there is an interval set
        if (labelEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d, i) {
                // Remove all but the nth label
                if (i % labelEvery !== 0) {
                    this.remove();
                }
                if (i % tickEvery !== 0) {
                    // Find the corresponding tick line and remove
                    axis.shapes.selectAll("line").each(function (d2) {
                        if (d === d2) {
                            this.remove();
                        }
                    });
                }
            });
        }
    }
};

关于javascript - 在dimple.js中自动缩放和格式化x轴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25187816/