像 Dc.js 中的条形图一样在条形之外设置行图标签？答案

【问题标题】：set row chart labels outside the bar like a barchart in Dc.js?像 Dc.js 中的条形图一样在条形之外设置行图标签？
【发布时间】：2018-04-25 16:00:51
【问题描述】：

如何在带有 dc.js 的行图中将标签放在条形之外？

我想要这样的图表：

但是，标签在实际的条内...是否需要更改任何设置才能使其成为这样？

【问题讨论】：

没有设置 - 我认为您需要调整渲染组件中的位置，提高边距为标签留出空间，并使用 CSS 将标签更改为黑色。图表由许多不同的人提供，因此它们并不总是一致的。

标签： dc.js

【解决方案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() 函数，因为我放置它只是为了确保我的标签长度不会超过特定限制。

希望这对你有用！

【讨论】：