我刚刚开始使用带有 Graphite 的 Cubism.js 作为其数据源,我面临以下问题:
当我要求立体主义查找与特定模式“findMetrics”匹配的所有指标时,它会正确找到所有指标,但我希望它只绘制实际包含数据点的指标(忽略所有为空的指标)。
我构建了一个简化版本来说明问题:
<meta charset="utf-8" />
<style>@import url(//square.github.com/cubism/style.css);</style>
<div id="body">
<div id="graphs"></div>
<script src="http://d3js.org/d3.v2.js" charset="utf-8"></script>
<script src="http://square.github.com/cubism/cubism.v1.js" charset="utf-8"></script>
<script>
var context = cubism.context().serverDelay(5 * 60 * 1000).step(60 * 1000);
var graphite = context.graphite("http://graphite-server");
// Graphite search metric pattern. In my case this it returns 4 metrics
var findMetrics = 'carbon.agents.*.{errors,committedPoints}';
graphite.find(findMetrics, function(error, results) {
// Map find results to array and set to graphite.metric object type
var metrics = results.sort().map(function(i) { return graphite.metric(i); });
// Loop through the array and print stuff to "graphs" div
for (var i=0;i<metrics.length;i++){
var metricName = metrics[i].toString().split('.');
d3.select("#graphs").call(function(div) {
div.append("div").selectAll(".horizon")
.data([metrics[i]])
.enter().append("div")
.attr("class", "horizon")
.style("font-size", "10px")
.call(context.horizon().title(metricName[metricName.length-1]));
});
}
});
</script>
示例输出:http: //i.stack.imgur.com/s4rGZ.jpg
问题:
- 在立体主义级别或 D3 级别应该在哪里进行过滤?
- 我如何告诉 Cubism 或 D3 不要绘制不包含任何数据的图形?
我希望有人可以帮助我解决这个问题。
提前感谢您的帮助。