Javascript 将D3.js标签文本显示为两行

我正在尝试使用创建漏斗图。我能够呈现图表并显示数据，但由于我以非常小的宽度绘制图表，类别的文本标签通常会溢出漏斗。这看起来不太令人愉快。所以现在我的想法是把标签显示成两行；第一行是目录，第二行我想显示金额

为了做到这一点，我尝试按照这里提供的各种示例对标签/文本进行文本包装，但没有取得任何进展。所以，如果有人能在这里帮助我，那就太好了

我觉得我需要进行更改的相关位置在代码的以下部分，但我无法确定如何进行更改：

{
 key: '_addBlockLabel',
 value: function _addBlockLabel(group, index) {
        var paths = this.blockPaths[index];

        var label = this._getBlockData(index)[0].formatted;
        var fill = this.data[index][3] || this.label.fill;

        var x = this.width / 2; // Center the text
        var y = this._getTextY(paths);

        group.append('text').text(label).attr({
            'x': x,
            'y': y,
            'text-anchor': 'middle',
            'dominant-baseline': 'middle',
            'fill': fill,
            'pointer-events': 'none'
        }).style('font-size', this.label.fontSize);
    }

    /**
   * Returns the y position of the given label's text. This is determined by
   * taking the mean of the bases.
   *
   * @param {Array} paths
   *
   * @return {Number}
   */
   }, {
  key: '_getTextY',
    value: function _getTextY(paths) {
        if (this.isCurved) {
            return (paths[2][1] + paths[3][1]) / 2 + this.curveHeight / this.data.length;
        }

        return (paths[1][1] + paths[2][1]) / 2;
    }
}]);

---

关于

您可以附加两个

文本

元素，而不是一个

使用代码时，您似乎可以同时访问标签和值，因此只需使用

dy

属性分别附加标签和值，以便将它们垂直分开：

key: '_addBlockLabel',
value: function _addBlockLabel(group, index) {
    var paths = this.blockPaths[index];

    var text  = this.blocks[index].label.raw;
    var value = this.blocks[index].value;
    var fill  = this.blocks[index].label.color;

    var x = this.width / 2; // Center the text
    var y = this._getTextY(paths);

    group.append('text').text(text).attr({
        x: x,
        y: y,
        dy: -10,
        fill: fill,
        'text-anchor': 'middle',
        'dominant-baseline': 'middle',
        'pointer-events': 'none'
    }).style('font-size', this.label.fontSize);

    group.append('text').text(value).attr({
        x: x,
        y: y,
        dy: 10,
        fill: fill,
        'text-anchor': 'middle',
        'dominant-baseline': 'middle',
        'pointer-events': 'none'
    }).style('font-size', this.label.fontSize);
}

---

工作提琴：

您可以在代码中添加一个JSFIDLE吗？！