如何让dc.js柱状图仅支持悬停、禁用点击交互？

我之前也碰到过一模一样的需求，dc.js其实有现成的方案可以解决，不用自己瞎折腾，给你两种靠谱的实现方式：

方法一：使用内置的disableFiltering()方法（推荐） #

这是dc.js官方提供的最直接的方法，专门用来禁用图表的过滤交互，但会保留悬停提示（tooltip）的功能，完全符合你的需求。

只需要在你的Top 10柱状图初始化代码里加上这一行：

// 替换成你实际的图表变量名
yourTop10BarChart.disableFiltering();

调用这个方法后，图表的点击事件就不会再触发cross-filter的联动过滤了，但鼠标悬停时的文本提示会正常显示。

方法二：手动阻止点击事件（进阶场景） #

如果因为某些特殊原因（比如需要保留部分点击行为），disableFiltering()不能满足你的需求，可以手动覆盖图表元素的点击事件，阻止它触发过滤逻辑：

yourTop10BarChart.on('pretransition', function(chart) {
  // 选中所有柱状图的bar元素
  chart.selectAll('.bar')
    .on('click', function(event) {
      // 阻止默认行为和事件冒泡，避免触发过滤
      event.preventDefault();
      event.stopPropagation();
    });
});

这里利用pretransition事件（图表渲染完成后触发），给每个bar绑定点击事件，阻止它的默认过滤行为，同时不影响tooltip的正常工作。

另外要确认你的tooltip配置是正常的，比如类似这样的代码能保证悬停文本正常显示：

yourTop10BarChart.tooltip(function(d) {
  return `类别：${d.key}<br/>数值：${d.value}`;
});

内容的提问来源于stack exchange，提问作者Gin98