0

我刚刚开始使用带有 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 不要绘制不包含任何数据的图形?

我希望有人可以帮助我解决这个问题。

提前感谢您的帮助。

4

1 回答 1

0

我终于通过添加功能“hideEmpty(true)”解决了这个问题

https://github.com/square/cubism/pull/56

  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()
                    .hideEmpty(true)
                    .title(metricName[metricName.length-1]));
    });
于 2013-07-01T20:28:57.460 回答