javascript - 水平条形图在 yAxis 中垂直对齐长文本

Question

jsfiddle

我正在使用 d3 绘制水平条形图，但在垂直对齐 y 轴上的文本时遇到问题。

这是导致问题的代码:

.attr('transform', function(d) {
    var name = d;
    if (d.length > 20) {
      name = d.substring(0, 20) + '...';
    }
    var names = name.split(' ');
    return 'translate(0,' + (-names.length / 2) * 10 + ')';
  })
  .call(wrap, 50)

基本上，我为长文本添加省略号并调用 wrap 函数。但是，长文本没有垂直对齐。

有什么帮助吗？

Answer 1

我重写了你的代码。看diff here , 工作示例 - https://jsfiddle.net/keqknbLb/1/

注意我移动了数据绑定(bind)代码，在您的示例中，您在 .call(yAxis) 之前应用数据，因为创建了五个 x 轴。

文本与一些评论对齐的代码:

function wrap(text, width) {
      text.each(function() {
        var text = d3.select(this); // eslint-disable-line no-invalid-this
        var words = text.text()
            .split(/\s+/)
            .reverse();
        var word;
        var line = [];
        var lineHeight = 1.1;
        var lineNumber = 0;
        var y = 0;
        var x = 0;
        // var dy = 0;
        var tspan = text.text(null)
            .append('tspan')
            .attr('x', x)
            .attr('y', y)
            .text('1'); // set text for correct tspan height

        var tspanHeight =  tspan.node().getBBox().height; // get tspan height

        word = words.pop();

        while (word) {
          line.push(word);
          tspan.text(line.join(' '));

          if (tspan.node().getComputedTextLength() > width - x) {
            line.pop();
            tspan.text(line.join(' '));
            line = [word];
            lineNumber += 1;

            tspan = text.append('tspan')
                .attr('x', x)
                .attr('dy', lineHeight + 'em')
                .text(word);
          }
          word = words.pop();
        }

        var textHeight = text.node().getBBox().height; // get height of text element

        var yTransition = textHeight / 2 - tspanHeight / 2; // calculate y transiton value

        text.attr('transform', 'translate(-10,-'+ yTransition +')'); // apply transition
      });
    };