tabs - 将值附加到人力车图形轴和刻度

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

我正在尝试用人力车图，d3和jquery UI实现一些折线图。
我有一些垂直选项卡，并且已经成功获取了可从外部html文件加载的图表。

人力车上有一些文档，但是我找不到我要的东西，所以我会问这个社区一些问题，如果可以吗？

首先，当从外部html文件在jquery UI中加载选项卡时，我应将所有的javascript和css放在嵌入的页面(请参见history.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轴将读取50ms，100ms，150ms等...可以这样做吗？

最后，在人力车中，他们有一个扇形的示例(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,

非常感谢您的帮助。

最佳答案

可能与OP不再相关，但是由于仍然没有答案，因此我可以回答人力车的问题:

要将ms附加到刻度线的末尾，您需要使用tickFormat选项。在their tutorial中，他们将轴设置如下:

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

在这里，他们将tickFormat设置为其内置的默认值，但实际上，它可以采用符合d3's 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是一个选项，会影响在使用之前是否复制您提供的数据。人力车来源的相关部分在这里:

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)，它将首先复制数据。