来自json示例的更小的cubism.js视界图 [英] more minimaler cubism.js horizon chart from json example
问题描述
跟着上一个问题...我的最小视界图示例比以前要小得多( d3.json()位调用了我编写的服务器端.php，它返回了我的测量值的.json版本. .php采用开始，停止，步骤(立体主义的context.metric()使用)作为其http查询字符串中的t0，t1和ss项，并发送回.json文件.除以1000是因为我使.php期望参数的单位是s，而不是ms. dt.val是因为我的测量值的实际数组在json输出的"val"成员中，例如 问题是，现在我已经将其缩减为(我认为)最低限度，而且我实际上理解了所有最低限度，而不是仅仅粘贴其他示例并希望获得最佳(在这种情况下，大多数我尝试更改的内容只是破坏而不是改进它们)，我需要开始重新添加参数和函数，以使其在视觉上更有用. 首先有两个问题，该测量值整天徘徊在22,300左右，并且可能整天变化+/- 10，因此该图形只是一个实心的绿色矩形，并且标签始终显示"22k"./p>
我已经使用.format(d3.format(.3f"))修复了标签(与使用SI度量前缀的默认.2s相对，因此是上面的"22k"). 我不知道如何使用轴，比例，范围或其他内容，因此它只显示与查看者相关的一系列数字.我实际上并不关心地平线图的正绿色，负蓝色和变暗的颜色方面.我只是将其用作概念验证，以便从.json数据源获取不断变化的测量窗口，但我真正需要保留的部分是serverDelay，步长，大小以及cubism.js的此类功能，智能地获取初始数据窗口，并通过.json请求逐步获取更多数据. 那我该如何保留我需要的立体派位，但是有用地更改我的全部22300图以显示重要的+/- 10个单位? update re斯科特·卡梅隆(Scott Cameron)提出的horizontal.extent([22315，22320])的建议...是的，我已经尝试过，但效果为零.到目前为止，我已经从最小"更改了其他内容... 我能够通过使用metric来改进图形.减法将其插入myHoriz线上方，如下所示:(但它现在使数字标签不再有用): 所有示例看起来都如此简洁，富有表现力，并且逐字记录效果很好，但是我尝试对它们进行的许多调整似乎适得其反，我不确定为什么会这样.同样，当我引用API Wiki时...从API中使用的5件事中，有4可以立即起作用，但是后来我似乎总是碰到一个似乎没有效果的东西，或者完全打破了图表.我不确定我是否将要传递的参数实际上是函数归结为一件事. 在此比例尺/范围问题之后的下一个障碍将是重新获得水平时间轴(将其切掉以使事情变得更简单和更容易理解之后)，并将其从面积图转换为更大的线图. 无论如何，所有方向和建议都值得赞赏. 这里是垂直比例更好的一个，但是现在数字标签不是我想要的:
您是否尝试过 horizon.extent ?它使您可以为地平线图指定[min，max]值.默认情况下，将创建一个线性比例尺，以将范围内的值映射到图表高度内的像素(由`horizon.height指定或默认为30个像素). Following up on a previous question... I've got my minimal horizon chart example much more minimaler than before ( minimal cubism.js horizon chart example (TypeError: callback is not a function) ) The d3.json() bit calls a server side .php that I've written that returns a .json version of my measurements. The .php takes the start, stop, step (which cubism's context.metric() uses) as the t0, t1, and ss items in its http query string and sends back a .json file. The divides by 1000 are because I made my .php expect parameters in s, not ms. And the dt.val is because the actual array of my measurements is in the "val" member of the json output, e.g. The problem is, now that I've got it pared down to (I think) the bare minimum, AND I actually understand all of it instead of just pasting from other examples and hoping for the best (in which scenario, most things I try to change just break things instead of improving them), I need to start adding parameters and functions back to make it visually more useful. Two problems first of all are, this measurement hovers all day around 22,300, and only varies +/- 10 maybe all day, so the graph is just a solid green rectangle, AND the label just says constantly "22k". I've fixed the label with .format(d3.format(".3f")) (versus the default .2s which uses SI metric prefixes, thus the "22k" above). What I can't figure out is how to use either axis, scale, extent, or what, so that this only shows a range of numbers that are relevant to the viewer. I don't actually care about the positive-green and negative-blue and darkening colours aspects of the horizon chart. I just used it as proof-of-concept to get the constantly-shifting window of measurements from my .json data source, but the part I really need to keep is the serverDelay, step, size, and such features of cubism.js that intelligently grab the initial window of data, and incrementally grab more via the .json requests. So how do I keep the cubism bits I need, but usefully change my all-22300s graph to show the important +/- 10 units? update re Scott Cameron's suggestion of horizon.extent([22315, 22320])... yes I had tried that and it had zero effect. Other things I've changed so far from "minimal" above... I was able to improve the graph by using metric.subtract inserting it above the myHoriz line like so: (but it made the numerical label useless now): All the examples seem so concise and expressive and work fine verbatim but so many of the tweaks I try to make to them seem to backfire, I'm not sure why that is. And similarly when I refer to the API wiki... maybe 4 out of 5 things I use from the API work immediately, but then I always seem to hit one that seems to have no effect, or breaks the chart completely. I'm not sure I've wrapped my head around how so many of the parameters being passed around are actually functions, for one thing. Next hurdles after this scale/extent question, will be getting the horizontal time axis back (after having chopped it out to make things more minimal and easier to understand), and switching this from an area-looking graph to more of a line graph. Anyway, all direction and suggestion appreciated. Here's the one with the better vertical scale, but now the numerical label isn't what I want:
Have you tried horizon.extent? It lets you specify the [min, max] value for the horizon chart. By default, a linear scale will be created to map values within the extent to the pixels within the chart's height (specified with `horizon.height or default to 30 pixels). 这篇关于来自json示例的更小的cubism.js视界图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！{
"other":"unused members...",
"n":5,
"val":[
22292.078125,
22292.03515625,
22292.005859375,
22292.02734375,
22292.021484375
]
}
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
;
var myMetr2 = myMetr.subtract(22315);
var myHoriz = myContext.horizon()
.metric(myMetr2)
.format...(continue as above)
<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>
{
"other":"unused members...",
"n":5,
"val":[
22292.078125,
22292.03515625,
22292.005859375,
22292.02734375,
22292.021484375
]
}
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
;
var myMetr2 = myMetr.subtract(22315);
var myHoriz = myContext.horizon()
.metric(myMetr2)
.format...(continue as above)
