气泡图中气泡中未显示文本

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();

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

Answer 1

showing all the labels

It would be easier to test this with a running example, but I think your problem is this line:

    .minRadiusWithLabel(15)

From your screenshot (thanks!) it looks like the big bubble has its label (which defaults to the key) but the labels are missing on the smaller bubbles. Try

    .minRadiusWithLabel(0)

to display labels no matter what size the bubble.

^{(minRadiusWithLabel docs)}

rotating the text

Since the text transform isn't driven by the data, it's best just to use CSS to change it, unless you need to change them individually.

Here's a reference to some of the relevant dc.js selectors.

From there we can infer a CSS rule like

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