在D3.js图中格式化标签

Question

我在d3.js中创建了一个条形图。但是我无法根据要求格式化Y轴标签。我想要做的是在标签文本之间添加空格。我使用了tickFormat（），但它无法达到相同的效果。这是代码的一部分。

var yAxis = d3.axisLeft(y)
.tickSize(3)
.tickFormat(function(d, i) {
    return d +"    "+TOP_TEN_CHANNELS[i].views+""; //to create custom tick format
});

我需要一个等于通道名称和视图之间四个空格的空格，但是，我得到的是单个空格。检查我的plunker。

Answer 1

您必须设置white-space属性。在你的情况下：

.barY .tick text {
  white-space: pre;
}

以下是更新的plunker：https://plnkr.co/edit/Stp7XoESdmjcsRxWbAFV?p=preview