12

我正在创建一个 Rickshaw.js 驱动的图表，就像在这个例子中一样：http ://code.shutterstock.com/rickshaw/tutorial/example_07.html基于我自己通过 AJAX 调用返回的数据。数据以字节（典型值范围为几 GB 或数百 MB）或秒（介于 10 秒到 50 分钟之间）为单位。我尝试对字节使用Rickshaw.Fixtures.Number.formatBase1024KMGTP格式化程序并在几秒钟内编写自己的格式化程序，这很好。问题是我需要以一种智能的方式定位刻度线 - 最好是动态的，但即使是静态设置（例如，放置一个刻度 every1024*1024*1024=1 GB或 every 60 s）也可以。

我尝试将其设置tickSize为1024^3：

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

但我最终没有看到任何蜱虫。我做错了什么，正确的方法是什么？

4

2 回答 2

10

基本上，您需要在 Rickshaw中调整、和类的tickOffsets()功能。Axis.XAxis.YAxis.Time

tickSize不会为您提供帮助-就像@Old Pro正确说明的那样-它表示粗体刻度线的大小（以像素为单位）。它与间距无关。

对于基于时间的轴

我的解决方案基本上包括替换这些文件中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赋值，上面没有说明。this.tickSpacing = args.tickSpacinginitialize()

自己试试

看看这个jsfiddle，那里有完整的代码。这肯定会给你一些指示。如果您愿意，您可以使用您的价值观创建自己的 jsfiddle，并告诉我您是否需要其他任何东西。

于 2013-05-04T19:04:53.967 回答
1

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

设置ticks为图表上您想要的刻度数，Rickshaw（实际上是 d3）会做一些魔术，为您提供漂亮的刻度值，在图表上生成大约该刻度数。

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

于 2013-04-28T22:41:24.463 回答