Question

我正在创建一个Rickshaw.js驱动的图形，就像在这个例子中一样：http://code.shutterstock.com/rickshaw/tutorial/example_07.html基于我自己通过AJAX调用返回的数据。数据以字节（典型值范围为几千兆字节或几百MB）或秒（10到50分钟之间）进行测量。我尝试使用Rickshaw.Fixtures.Number.formatBase1024KMGTP格式化器来表示字节，然后自己写了几秒钟，这很好。问题是我需要以智能的方式定位刻度线 - 最好是动态的，但即使是静态设置（例如每隔1024*1024*1024=1 GB或每60 s打勾）也没问题。

我尝试将tickSize设置为1024^3，如下所示：

var y_axis = new Rickshaw.Graph.Axis.Y({
    graph: graph,
    tickSize: 1073741824 // 1 GB
});
y_axis.render();

但我最终看不到任何嘀嗒声。我做错了什么以及什么是正确的方式？

Answer 1

基本上，您需要调整人力车中Axis.X，Axis.Y和Axis.Time类的tickOffsets()功能。

tickSize无法帮助您 - 就像@Old Pro stated正确一样 - 它表示粗体刻度线的大小（以像素为单位）。它与间距无关。

对于基于时间的轴

我的解决方案主要包括替换这些文件中的标准tickOffsets()函数

this.tickOffsets = function() {
    var domain = this.graph.x.domain();

    var unit = this.fixedTimeUnit || this.appropriateTimeUnit();
    var count = Math.ceil((domain[1] - domain[0]) / unit.seconds);

    var runningTick = domain[0];
    var offsets = [];

    for (var i = 0; i < count; i++) {
        var tickValue = time.ceil(runningTick, unit);
        runningTick = tickValue + unit.seconds / 2;

        offsets.push( { value: tickValue, unit: unit } );
    }

    return offsets;
};

通过自定义例程。这就是诀窍：

this.tickOffsets = function() {
    var domain = this.graph.x.domain();
    var unit = this.fixedTimeUnit || this.appropriateTimeUnit();

    var tickSpacing = args.tickSpacing || unit.seconds;
    var count = Math.ceil((domain[1] - domain[0]) / tickSpacing);

    var runningTick = domain[0];
    var offsets = [];

    for (var i = 0; i < count; i++) {
        var tickValue = time.ceil(runningTick, unit);
        runningTick = tickValue + tickSpacing;

        offsets.push( { value: tickValue, unit: unit } );
    }
    return offsets;
};

有了这个，你可以写一些像

这样的东西

var time = new Rickshaw.Fixtures.Time();
var timeUnit = time.unit('year');

var x_axis = new Rickshaw.Graph.Axis.ExtendedTime( 
    { 
        graph: graph, 
        tickSpacing: 60*60*24*365*13, // 13 years
        timeUnit: timeUnit
    } );

让蜱每隔13年均匀分布。

对于基于价值的轴

对于基于值的Axes，您需要扩展render()函数以包含“手动”设置轴的刻度的工具。我是这样做的：

this.render = function() {

    if (this.graph.height !== this._renderHeight) this.setSize({ auto: true });

    var axis = d3.svg.axis().scale(this.graph.y).orient(this.orientation);

    if (this.tickSpacing) {
        var tickValues = [];

        var min = Math.ceil(axis.scale().domain()[0]/this.tickSpacing);
        var max = Math.floor(axis.scale().domain()[1]/this.tickSpacing);

        for (i = min * this.tickSpacing; i < max; i += 1) {
            console.log(i);
            tickValues.push(i * this.tickSpacing);
        }
        axis.tickValues(tickValues);
    }

    axis.tickFormat( args.tickFormat || function(y) { return y } );

    if (this.orientation == 'left') {
        var berth = this.height * berthRate;
        var transform = 'translate(' + this.width + ', ' + berth + ')';
    }

    if (this.element) {
        this.vis.selectAll('*').remove();
    }

    this.vis
        .append("svg:g")
        .attr("class", ["y_ticks", this.ticksTreatment].join(" "))
        .attr("transform", transform)
        .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));

    var gridSize = (this.orientation == 'right' ? 1 : -1) * this.graph.width;

    this.graph.vis
        .append("svg:g")
        .attr("class", "y_grid")
        .call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize));

    this._renderHeight = this.graph.height;
};

这里的重要部分是if (this.tickSpacing)子句中的陈述。它们计算配置数组中tickSpacing变量给出的滴答，并将它们分配给axis.tickValues(tickValues)语句中的轴。请注意this.tickValues语句中的this.tickSpacing = args.tickSpacing语句中分配了initialize()，未在上面说明。

亲自尝试

请查看此jsfiddle，其中包含完整的代码。这肯定会给你一些指示。如果你愿意，你可以创建自己的jsfiddle与你的价值观，并告诉我你是否还需要其他东西。

Answer 2

tickSize是刻度的大小（以像素为单位）。不是你想要设置的数字。

将ticks设置为图表上所需的刻度数，而人力车（实际上是d3）将为您提供相当大的刻度值，以便在图表上生成大约该刻度数。

如果你想进一步控制，你将不得不深入研究d3，在那里你可以使用axis.tickValues()明确设置刻度值。我可能会复制现有的Rickshaw.Graph.Axis.Y代码并创建我自己的Y轴类，其中包括对tickValues的访问权限或使用我自己的scale的能力。人力车在graph.render()函数中创建Y比例，这有点不干净，所以你不能轻易地覆盖Y比例，但Y比例人力车创建确实有图表数据设置的范围，这是信息在创建自己的刻度值时你会想要的。

如何在Rickshaw.js图中设置动态或静态刻度尺寸？

2 个答案:

对于基于时间的轴

对于基于价值的轴

亲自尝试