dc.js - 气泡图中的气泡上不显示文本

Question

我有一个使用 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

Answer 1

显示所有标签

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

    .minRadiusWithLabel(15)

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

    .minRadiusWithLabel(0)

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

^{（minRadiusWithLabel 文档）}

旋转文本

由于文本转换不是由数据驱动的，因此最好只使用 CSS 来更改它，除非您需要单独更改它们。

这是对一些相关 dc.js 选择器的参考。

从那里我们可以推断出一个 CSS 规则，比如

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