Question

跟进上一个问题......我的最小地平线图示例比以前更加迷你（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（立体主义的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”。 / p>

我用.format（d3.format（“。3f”））修复了标签（相对于使用SI公制前缀的默认.2s，因此上面的“22k”）。

我无法弄清楚的是如何使用轴，比例，范围或什么，这样它只显示与查看者相关的一系列数字。我实际上并不关心地平线图的正绿色和负蓝色以及变暗的颜色方面。我只是用它作为概念验证来从我的.json数据源获得不断变换的测量窗口，但我真正需要保留的部分是serverDelay，step，size以及cubism.js的这些特性。智能地抓取初始数据窗口，并通过.json请求逐步获取更多数据。

那么我如何保留我需要的立体主义位，但有用地改变我的全22300s图表以显示重要的+/- 10个单位？

更新了斯科特卡梅隆关于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
;

600 samples all around 22300 +/- 10

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

var myMetr2 = myMetr.subtract(22315);

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

所有的例子看起来都是如此简洁和富有表现力，并且逐字工作，但我试图对他们做出的许多调整似乎适得其反，我不确定为什么会这样。同样，当我提到API维基时...我可能会立即使用API工作中的5件事中的4件，但后来我似乎总是找到一件似乎没有效果的东西，或完全打破图表。我不确定我是否已经知道如何传递这么多参数实际上是函数，一方面。

在这个比例/范围问题之后的下一个障碍，将使水平时间轴恢复（在将其切掉以使事情变得更小且更容易理解之后），并将其从看起来更像的图形转换为更多线图。

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

这是具有更好垂直比例的那个，但现在数字标签不是我想要的： better vertical visually, worse numerically

Answer 1

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

来自json例子的更多minimaler cubism.js地平线图

1 个答案: