修改Cubism.js图形标题文本

Question

使用cubism.js，我正在抓取石墨数据并在页面上创建多个图形。看起来很棒，但我不知道如何修改每个图的默认标题/文本。非常有限的JS经验。

这可能是一个cubusm.js，d3.js，或者一般的javascript问题，我不确定。由于石墨在有时深文件夹结构中嵌套数据，我希望能够简化默认字符串。我想修改的文本示例('servers.apt1.loadavg.05'，'servers.apt2.loadavg.05‘等)：http://i.imgur.com/4FqwhjA.png

如何修改每个图形的图形数据的标题/文本？获取"servers.apt1.loadavg.05，希望显示"apt1“.

var context = cubism.context()
    .step( 1 * 30 * 1000 )
    .size(960); 

var graphite = context.graphite("http://graphite.example.com");
graphFind = 'servers.*.loadavg.05'

graphite.find(graphFind, 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 array and print stuff to "graphs" div
  for (var i=0;i<metrics.length;i++){
    d3.select("#graphs").call(function(div) {
      div.append("div")
        .selectAll(".horizon")
        .data([metrics[i]])
        .enter()
        .append("div")
        .attr("class", "horizon")
        .call(context.horizon());
    });
  }
});

Answer 1

根据文档，您可以使用horizon.title()函数来完成这一任务。所以在你的情况下，你会觉得

.call(context.horizon().title("your title here"));

您也可以将它指定为一个函数。

.call(context.horizon().title(function(d) { return d.title; }));