为人力车图轴附加值以及什么是ticksTreatment和Preserve

Question

这是我在这里的第一个问题所以请放轻松:)

我试图用人力车图,d3和jquery UI实现一些线图.我有一些垂直标签,并成功地从外部html文件加载图表.

关于人力车有一些文件,但我找不到具体的东西所以我会问这个社区一些问题,如果可以的话？

首先从外部html文件加载jquery UI中的Tabs时,我应该将所有javascript和css放入嵌入的页面(见下面的historical.html)还是放入父页面？我试过这两个,他们似乎工作,我只是想知道最佳实践.

<ul>
    <li><a href="#tabs-1"><div id="live-icon"></div>LIVE GRAPHS</a></li>
    <li><a href="historic.html"><div id="historic-icon"></div>HISTORIC DATA</a></li>

其次,我在图上的x轴是以毫秒为单位.我想在每个x轴"刻度"的末尾附加"ms".所以x轴读数为50毫秒,100毫秒,150毫秒等......可以这样做吗？

最后,在人力车中,他们拥有充满风扇的例子(http://code.shutterstock.com/rickshaw/examples/extensions.html),它拥有所有的花里胡哨.它有两个属性,我找不到任何信息.坚持:真的吗？另一个例子有tickFormat和tickTreatment？有人可以解释这些做什么.

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,

非常感谢您的帮助.

Answer 1

可能不再与OP相关，但由于它仍然没有答案，我可以回答人力车问题：

要将 ms 附加到刻度末尾，您需要使用该tickFormat选项。在他们的教程中，他们按如下方式设置轴：

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
} );

在这里，他们将 设为tickFormat内置的默认值，但实际上，它可以采用符合d3 的 axis'tickFormat所采用的任何内容。tickFormat应该是一个接受数字并输出字符串的函数。你可能想要类似的东西

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: function (d) { return d + ' ms'; },
        element: document.getElementById('y_axis'),
} );

这将使刻度简单地成为毫秒后面的数字。

这也恰好回答了接下来的三部分问题的一部分。另外两个部分涉及tickTreatment和preserve。

简短的答案是，它tickTreatment作为一个类添加到刻度中。这很有用的原因是 Rickshaw 所利用的 CSS 样式。他们有一些预设可供您使用。他们在该示例中使用的称为glow，它在文本周围添加白色发光，使其在图表顶部可读。

preserve是一个选项，它影响您提供的数据在使用之前是否被复制。Rickshaw 来源的相关部分在这里：

var preserve = this.preserve;
if (!preserve) {
    this.series.forEach( function(series) {
        if (series.scale) {
            // data must be preserved when a scale is used
            preserve = true;
        }
    } );
}

data = preserve ? Rickshaw.clone(data) : data;

基本上，如果您设置preserve为true（默认为false），它将首先复制数据。