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

此致

Answer 1

您可以附加两个echo "r" > cmds gdb r --args ./run -arg1 -arg2 -arg3 < cmds元素而不是一个。

使用代码似乎您可以同时访问标签和值，因此只需要单独附加它们，并使用text属性将它们垂直分开：

dy

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

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

1 个答案: