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

Question

我正在尝试使用 the D3Funnel library 创建漏斗图.我能够渲染图表并显示我的数据，但由于我以非常小的横向尺寸绘制图表，因此类别的文本标签经常溢出漏斗。这看起来不太令人愉快。所以现在我的想法是分两行显示标签；第一行是类别，第二行我想显示金额。

为了能够做到这一点，我尝试按照此处提供的各种示例对标签/文本进行文本换行，但我未能取得任何进展。因此，如果有人可以帮助我，那就太好了。

http://jsfiddle.net/NewMonk/s76oap3d/1/

我觉得我需要进行更改的相关位置在代码的以下部分，但无法弄清楚我该如何去做:

{
 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;
    }
}]);

问候

Answer 1

您可以附加两个 text 元素而不是一个。

玩代码似乎你可以访问标签和值，所以只需要分别附加它们，使用 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);
}

工作 fiddle :http://jsfiddle.net/38kkctqh/