【发布时间】：2013-09-02 13:04:01
【问题描述】：
跟进上一个问题...我的最小水平线图示例比以前小得多 (minimal cubism.js horizon chart example (TypeError: callback is not a function))
<body>
<div class="mag"></div>
<script type="text/javascript">
var myContext = cubism.context();
var myMetr = myContext.metric(function(start, stop, step, callback) {
d3.json("../json/600s.json.php?t0=" + start/1000 + "&t1=" + stop/1000 + "&ss=" + step/1000, function(er, dt) {
if (!dt) return callback(new Error("unable to load data, or has NaNs"));
callback(null, dt.val);
});
});
var myHoriz = myContext.horizon()
.metric(myMetr);
d3.select(".mag")
.call(myHoriz);
</script>
</body>
d3.json() 位调用我编写的服务器端 .php，它返回我的测量值的 .json 版本。 .php 将 start、stop、step（cubism 的 context.metric() 使用）作为其 http 查询字符串中的 t0、t1 和 ss 项，并发送回一个 .json 文件。除以 1000 是因为我让我的 .php 期望参数在 s 中，而不是 ms。 dt.val 是因为我的测量值的实际数组位于 json 输出的“val”成员中，例如
{
"other":"unused members...",
"n":5,
"val":[
22292.078125,
22292.03515625,
22292.005859375,
22292.02734375,
22292.021484375
]
}
问题是，现在我已经把它缩减到（我认为）最低限度，而且我实际上理解了所有这些，而不是仅仅从其他示例中粘贴并希望获得最好的（在这种情况下，大多数我试图改变的东西只是破坏而不是改进它们），我需要开始添加参数和函数以使其在视觉上更有用。
首先有两个问题，这个测量值整天在 22,300 附近徘徊，并且可能整天只有 +/- 10 的变化，所以图表只是一个纯绿色矩形，并且标签只是不断显示“22k”。
我已经用 .format(d3.format(".3f")) 修复了标签（与使用 SI 公制前缀的默认 .2s 相比，因此上面的“22k”）。
我不知道如何使用轴、比例、范围或什么，因此这只显示与查看者相关的数字范围。我实际上并不关心地平线图的正绿色和负蓝色以及变暗的颜色方面。我只是将它用作概念验证，以从我的 .json 数据源中获取不断变化的测量窗口，但我真正需要保留的部分是 cubism.js 的 serverDelay、step、size 和此类特性智能抓取数据的初始窗口，并通过 .json 请求增量抓取更多数据。
那么，我如何保留我需要的立体派位，但有效地更改我的全 22300 图表以显示重要的 +/- 10 个单位？
更新 Scott Cameron 对 Horizon.extent([22315, 22320]) 的建议...是的，我已经尝试过了，它的效果为零。到目前为止，我已经从上面的“最小”改变了其他东西......
var myHoriz = myContext.horizon()
.metric(myMetr)
.format(d3.format(".2f"))
.height(100)
.title("base1 (m): ")
.colors(["#08519c", "#006d2c"])
// .extent([22315, 22320]) // no effect with or without this line
;
我能够通过使用 metric.subtract 将其插入 myHoriz 行上方来改进图表，如下所示：（但它现在使数字标签无用）：
var myMetr2 = myMetr.subtract(22315);
var myHoriz = myContext.horizon()
.metric(myMetr2)
.format...(continue as above)
所有示例看起来都非常简洁和富有表现力，并且逐字显示效果很好，但我尝试对它们进行的许多调整似乎适得其反，我不知道为什么会这样。同样，当我参考 API wiki 时……我从 API 中使用的 5 件东西中可能有 4 件立即起作用，但我似乎总是遇到一个似乎没有效果的东西，或者完全打破了图表。一方面，我不确定我是否已经意识到有多少被传递的参数实际上是函数。
在这个规模/范围问题之后，下一个障碍将是恢复水平时间轴（在将其切掉以使事情变得更简单和更容易理解之后），并将其从看起来像区域的图表切换到更多折线图。
无论如何，所有的方向和建议都值得赞赏。
这是垂直比例更好的那个，但现在数字标签不是我想要的：
【问题讨论】：