Question

我刚开始使用Graphite.js和Graphite作为数据源，我面临以下问题：

当我要求立体主义查找与特定模式“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级别进行？
我怎么能告诉立体主义或 D3不要绘制不包含任何数据的图形？

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

提前感谢您的帮助。

Answer 1

我最后通过添加“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]));
    });

不要绘制空指标

1 个答案: