气泡图中的气泡上不显示文本答案

【问题标题】：Text is not displayed on Bubbles in Bubble Chart气泡图中的气泡上不显示文本
【发布时间】：2019-03-18 10:48:58
【问题描述】：

我有一个使用 dc.js 构建的气泡图，其中的文本未显示在气泡上。另外，有没有办法旋转气泡上的文字。

这是我的代码。

wfAvgChartBubble
        .width(658)
        .height(400)
        .margins({top: 10, right: 50, bottom: 30, left: 60})
        .dimension(wfStatusNameAvgDimBubble)
        .group(wfStatusNameAvgGroupBubble)
        .colors(d3.scaleOrdinal(d3.schemeCategory10))
        .keyAccessor(function (p) {
            return p.value.total;
        })
        .valueAccessor(function (p) {
            return p.value.avg;
        })
        .radiusValueAccessor(function (p) {
            return p.value.avg;
        })
        .x(d3.scaleBand().domain(data.map( function(d) {
            return d['workflow_status_name'];
        }
         )))
        .xUnits(dc.units.ordinal)
        //.x(d3.scaleLinear().domain([0, 5000]))
        .r(d3.scaleLinear().domain([0, 9000]))
        .minRadiusWithLabel(15)
        .elasticY(true)
        .yAxisPadding(150)
        .elasticX(true)
        .xAxisPadding(300)
        .maxBubbleRelativeSize(0.07)
        .title(function (p) {
               return p.key
                       + "\n"
                       + "Total Records: " + p.value.total + "\n"
                       + "Average Time Taken: " + p.value.avg;
           })
        .render();

我需要在每个气泡上打印文字

【问题讨论】：

标签： dc.js

【解决方案1】：

显示所有标签

用一个运行的例子来测试它会更容易，但我认为你的问题是这一行：

    .minRadiusWithLabel(15)

从您的屏幕截图（谢谢！）看来，大气泡有它的标签（默认为键），但较小的气泡上缺少标签。试试

    .minRadiusWithLabel(0)

无论气泡大小如何都显示标签。

^{(minRadiusWithLabel docs)}

旋转文本

由于文本transform不是由数据驱动的，所以最好只使用CSS来改变它，除非你需要单独改变它们。

这是reference to some of the relevant dc.js selectors。

从那里我们可以推断出类似的 CSS 规则

g.node text {
    transform: rotate(-45deg);
}

【讨论】：