防止 Rickshaw/D3 显示高于给定缩放级别的 x 轴标签答案

【问题标题】：Prevent Rickshaw/D3 from showing x axis labels above a given zoom level防止 Rickshaw/D3 显示高于给定缩放级别的 x 轴标签
【发布时间】：2014-07-14 15:56:00
【问题描述】：

我是 JS/D3 和 Rickshaw 的新手。我正在尝试修改 example plot 以满足我的需要。

我的 x 轴是 DNA 序列，即字母 ACTG 的组合。我已将此序列用作 x 轴标签，方法是将其解析为数组，然后使用

var xAxis = new Rickshaw.Graph.Axis.X( {
    graph: graph,
    tickFormat: function(x) {
        return dna[x]
    }
} );

我现在的问题是，当缩小绘图时，Rickshaw 默认情况下会在我的序列中选择随机字母以显示为 x 轴标签。这对于数字 x 轴是有意义的，但对我来说不是。

我需要将 Rickshaw.Graph.Axis.X 的行为更改为仅在缩放级别足够高时显示 x 轴标签。我知道我需要以某种方式找到缩放级别并将轴标签设置为空字符串（如果它太低）。即使阅读了非常相似的问题，我仍然不知道从哪里开始 here.

【问题讨论】：

标签： javascript d3.js rickshaw

【解决方案1】：

我找到了一个简单的解决方案：我为 xaxis 标签实现了一个格式化程序，它检查 xaxis 的范围，如果它太大则返回空标签。

var ticksTreatment = 'glow';
var pixelsPerTick = 10
xAxis = new Rickshaw.Graph.Axis.X( {
    graph: graph,
    ticksTreatment: ticksTreatment,
    pixelsPerTick: pixelsPerTick,
    tickFormat: function(x) {
        var maxdist = 900/pixelsPerTick // width/pixelpertick
        var xvalues = graph.stackedData[0] // first line, but they all share the same x 
        var xmin = xvalues[0].x
        var xmax = xvalues[xvalues.length-1].x
        var dist = xmax-xmin

        if (dist < maxdist) {
            return dna[x]
            }
        else {return ""}

    }
} );

【讨论】：