如何将默认预览宽度设置为 Rickshaw.Graph.RangeSlider答案

【问题标题】：how to set default preview width to Rickshaw.Graph.RangeSlider如何将默认预览宽度设置为 Rickshaw.Graph.RangeSlider
【发布时间】：2014-01-16 13:48:59
【问题描述】：

我是 Rickshaw JS 工具包的新手。在http://code.shutterstock.com/rickshaw/examples/extensions.html 的示例中，用于选择时间范围的图表底部的预览栏（Rickshaw.Graph.RangeSlider）默认是可用的总时间范围。

如何自定义 RangeSlider 的默认预览为最后一分钟和最小预览宽度？

提前致谢。

【问题讨论】：

标签： javascript rickshaw

【解决方案1】：

看起来所有的缩放和预览重绘都是在mousemove handler 中完成的。因此，除了使用这些事件处理程序之外，似乎没有任何方法可以更改或默认预览宽度 - 奇怪的是它没有在某处分解，因此您可以手动设置缩放？

作为一个可怕的 hack，您可以显式触发一系列鼠标事件来模拟鼠标向下/拖动/向上，根据您想要移动到的容器宽度的任何分数设置 clientX 值。例如（在 Chrome 中）我们将 mousedown 发送到左侧句柄，然后将 mousemove ane mouseup 发送到文档，其中 w 是我的容器宽度，我想缩放到 t1 - t2 范围，而不是默认的 t0 - t2。

    // fake handle move
    edown = document.createEvent("HTMLEvents");
    edown.initEvent("mousedown", true, true);
    edown.clientX = 0;
    emove = document.createEvent("HTMLEvents");
    emove.initEvent("mousemove", true, true);
    emove.clientX = 0.9 * w * (t1 - t0) / (t2 - t0) ;
    eup = document.createEvent("HTMLEvents");
    eup.initEvent("mouseup", true, true);
    $('#slider .left_handle')[0].dispatchEvent(edown);
    document.dispatchEvent(emove);
    document.dispatchEvent(eup);

【讨论】：

成功了！谢谢。虽然有几个cmets。 1）为什么是0.9 *？我认为这是额外的，至少对于我的应用程序而言。 2) 不推荐使用 initEvent。在这里developer.mozilla.org/en-US/docs/Web/API/Event/initEvent 使用 Event() 构造函数或 jquery.trigger() 可能更好。然而，document.createEvent() 是让它在 IE 中工作的唯一方法
抱歉，是的，我认为 0.9w 是我的实际容器宽度。重新 2) 毫无疑问，这是我在操作中的剪切和粘贴编码的一个案例 :)

【解决方案2】：

我知道这个问题很老了，但如果有人偶然发现同样的问题：不要伪造鼠标事件。查看滑块的代码，滑动时的作用是设置图形窗口的xMin 和xMax，然后更新。我们也可以这样做——在图调用初始化之后：

// lower limit            
graph.window.xMin = 5;
// upper limit
graph.window.xMax = 10;
// this will also update the slider
graph.update();

【讨论】：