javascript - DC.js |我怎样才能让.title(工具提示)在箱线图上工作？

Question

我在时间 x 轴上有许多箱线图。我已经关闭了刷牙功能，因为我希望工具提示 (.title) 能够正常工作。但是它不起作用。感谢您的任何建议!这是我的代码:

distTime.width(350)
        .height(150)
        .margins({left:50,right:10,top:0,bottom:30})
        .dimension(timeDim)
        .group(premiumGroup)
        .clipPadding(30)
        .brushOn(false)
        .renderTitle(true)
        .title(function(d){ return "emma"; })
        .boxWidth(20)
        .colors("steelblue")
        .renderHorizontalGridLines(true)
        .x(d3.time.scale())
        .round(d3.time.years.round)
        .xUnits(d3.time.years)
        .elasticY(true);

    distTime.yAxis().tickFormat(d3.format('s'));
    distTime.yAxis().ticks(5);

function calc_domain(chart) {
    var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
        max = d3.max(chart.group().all(), function(kv) { return kv.key; });
    //max = d3.time.year.offset(max, 1);
    chart.x().domain([min, max]);
}
distTime.on('preRender', calc_domain);
distTime.on('preRedraw', calc_domain);

Answer 1

您可以使用预转换事件处理程序添加标题:

  chart.on('pretransition', function(chart) {
    chart.selectAll('rect.box')
      .append('title')
      .text(function(d) {
        return d.key + ' (mean ' + d3.mean(d.value) + ')';
      });
  });

fiddle 示例:http://jsfiddle.net/rwbmrzu9/8/

这会将标题添加到每个盒须的主矩形 ('rect.box') 中；检查 DOM 以查看要自定义的其他部分，或使用 'g.box' 将标题添加到整个内容中。

请注意，数据将包含 d.value 中框的所有单独值的数组；在这里我显示了平均值。