Question

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

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

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

我现在的问题是，当缩小图表时，人力车默认选择我的序列中的随机字母显示为x轴标签。这对于数字x轴是有意义的，但在我的情况下则不然。

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

Answer 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 ""}

    }
} );

防止人力车/ D3显示高于给定缩放级别的x轴标签

1 个答案: