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

Question

我正在创建一个基于Rickshaw.js的图形，与本例非常类似：http://code.shutterstock.com/rickshaw/tutorial/example_07.html基于我自己的数据，该数据是通过AJAX调用返回的。数据以字节(典型的值范围为几in或数百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年均匀分布一次的时间间隔。

对于基于值的轴

对于基于值的轴，您需要扩展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是在initialize()函数的this.tickSpacing = args.tickSpacing语句中指定的，而不是上面所述的。

你自己试试吧

请看一下这个jsfiddle，其中提供了完整的代码。这肯定会给你一些指导。如果您愿意，您可以使用您的值创建自己的jsfiddle，如果需要任何其他东西，请告诉我。

Answer 2

tickSize是刻度的大小，单位为像素。这不是你想要设置的一个巨大的数字。

将ticks设置为您想要在图表上显示的刻度数，Rickshaw (实际上是d3)将会变一些魔术，为您提供在图表上生成大约该刻度数的刻度值。

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