將D3.js標籤文本顯示爲兩行

Question

我正在嘗試使用the D3Funnel library創建漏斗圖。我能夠呈現圖表並顯示我的數據，但由於我在橫向以非常小的尺寸繪製它，因此類別的文本標籤通常會從漏斗中溢出。這看起來不太令人愉快。所以現在我的想法是以兩行顯示標籤;在第一行將是cateogry，在第二行我要顯示金額。

爲了能夠這樣做，我試着按照這裏提供的各種示例以文本方式包裝標籤/文本，但是我一直未能取得任何進展。所以如果有人能幫助我在這裏，這將是非常好的。

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

Regards

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

工作撥弄：http://jsfiddle.net/38kkctqh/