条形图 dc.js 的标签自动调整大小答案

【问题标题】：Label auto resizing for the bar charts dc.js条形图 dc.js 的标签自动调整大小
【发布时间】：2020-01-21 19:30:54
【问题描述】：

我在 dc.js 中有一个条形图。 x 轴是维度，y 是 1 - 10k 范围内的度量。我想显示所有条形及其标签不相互重叠。当柱的数量开始增加时，图表看起来很好，当柱的数量开始增加时，它们看起来不太好。我正在寻找自动调整条形图标签的大小。

示例图表

我试过这个renderlet的方法来自动改变字体大小

 stackedBarChart.on('renderlet', function(chart) {
             chart.selectAll('text.barLabel')
                 .attr('transform', function(d) {
                   //How do i get/set the width of the label here ?
                 });

【问题讨论】：

我会隐藏文本并在悬停时显示（一旦悬停在栏上显示文本）。
没关系，直到我不将其导出为 pdf，我想以 pdf 格式显示。
没有任何内置功能可以做到这一点。我认为您需要计算条形的数量（group.all() 的大小），然后将图表宽度除以该数字以获得条形宽度。然后您可以将标签的字体大小设置为条形宽度的倍数。这在预转换钩子中效果很好。
我只是快速浏览了一下，如果您使用的是 DCv4，则条形宽度显示为 barChart._barWidth。私人成员在早期版本中没有公开。
我使用的是 dc 3.1.5。我还用我试图实现的字体大小更改更新了我的问题可以指导我一点吗？

标签： d3.js dc.js

【解决方案1】：

我尝试了以下方法，并且能够进行动态标签大小调整。我使用了 pretransistion 并在其中获取了所有条形标签并更改了它们的字体大小。字体大小根据 Gordon 的想法进行更改，获取每个条的大小并动态分配字体大小。为了进行测试，我使用 .2 作为减小字体大小的因素。

   .on('pretransition', function(chart) {
         var chart_width = chart.width();
        chart.selectAll("text.barLabel").attr('font-size', function(data) {
            let total_bars = chart.group().all().length;
            let sing_bar_width = Math.floor(chart_width / total_bars);
            return (sing_bar_width * .2) + "px";
        });
    });

【讨论】：

感谢您发布您的解决方案！将宽度计算移出selectAll 块可能更有效，但这可能并不重要。