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

Question

我在 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 ?
                 });

Answer 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";
        });
    });

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

Label auto resizing for the bar charts dc.js

d3.js

dc.js