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/

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

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

DC.js |如何让 .title（工具提示）在箱线图上工作？

DC.js | How can i get .title (tooltip) to work on boxplot?

javascript

dc.js