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

Display D3.js label text into two lines

本文关键字：两行 记为 D3 js 文本 显示      更新时间：2023-09-26

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

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

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

问候

您可以追加两个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);
}

工作小提琴：http://jsfiddle.net/38kkctqh/

相关文章：