0

跟进上一个问题...我的最小水平线图示例比以前小得多（最小 cubism.js 水平线图示例（TypeError：回调不是函数））

        <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 对 Horizo​​n.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
;

22300 +/- 10 左右的 600 个样本

我能够通过使用 metric.subtract 将其插入 myHoriz 行上方来改进图形，如下所示：（但它现在使数字标签无用）：

var myMetr2 = myMetr.subtract(22315);

var myHoriz = myContext.horizon()
        .metric(myMetr2)
        .format...(continue as above)

所有的例子看起来都很简洁和富有表现力，并且逐字运行很好，但是我尝试对它们进行的许多调整似乎适得其反，我不知道为什么会这样。同样，当我参考 API wiki 时……我从 API 中使用的 5 件东西中可能有 4 件立即起作用，但我似乎总是遇到一个似乎没有效果的东西，或者完全打破了图表。一方面，我不确定我是否已经知道有多少被传递的参数实际上是函数。

在这个比例/范围问题之后的下一个障碍将是恢复水平时间轴（在将其切掉以使事情变得更简单和更容易理解之后），并将其从区域图转换为更多的折线图。

无论如何，所有的方向和建议表示赞赏。

这是垂直比例更好的那个，但现在数字标签不是我想要的： 视觉上更好的垂直，数字上更差

4

1 回答 1

0

您是否尝试过Horizo​​n.extent？它允许您为水平线图指定 [min, max] 值。默认情况下，将创建线性比例以将范围内的值映射到图表高度内的像素（使用 `horizo​​n.height 指定或默认为 30 像素）。

于 2013-08-30T05:44:55.653 回答