score:2

Accepted answer

I rewrote your code. Look at the diff here, working example - https://jsfiddle.net/keqknbLb/1/

Pay attention I moved data binding code, in your example, you apply data before .call(yAxis) as result five x axis was created.

Code for text aligning with some comments:

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

Related Query

More Query from same tag