在Dc.js中像条形图一样在栏外设置行图标签？

Question

如何在带有dc.js的行图中的条形图外面添加标签？

我喜欢这样的图表：

然而，标签位于实际的条形图内...是否有任何需要更改的设置才能让它像这样？

Answer 1

我终于做到了，这是窍门，

正如Gordon所说，它可以在renderlet上完成。

首先，我为行图设置了边距，

.margins({ top: 20, right: 20, bottom: 40, left: 110 })

然后通过将x值设置为负值来将标签带到外面。

.labelOffsetX(-10)

这将完美地移动我们的标签，但是它仍然需要一些样式更改才能看起来很好，并且需要在renderlet上完成

.on('renderlet', function (chart) {
                            chart.selectAll("g.row  text")
                                .style("text-anchor", "end")
                                .call(function (t) {
                                    t.each(function (d) {
                                        var self = d3.select(this);
                                        var text = self.text();
                                        if (text.length > 14) {
                                            self.text('');
                                            text = text.substring(0, 14) + '..';
                                            self.text(text);
                                        }
                                    })
                                });
                        })    

您可以忽略.call（）函数，因为这只是为了确保我的标签长度​​不超过特定限制。

希望对您有用。