Vertikale auszurichten Langtext in yAchse für horizontalen Balkendiagramm

Question

jsfiddle

I d3 verwende horizontale Balkendiagramm zu zeichnen, sondern Problem konfrontiert, um vertikal Text in der Y-Achse auszurichten. Hier

ist der Code, Problem verursacht:

.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) 

Grundsätzlich Ich füge Ellipsen für Langtext und Aufruf Wrap-Funktion. Langer Text wird jedoch nicht vertikal ausgerichtet.

Irgendwelche Hilfe?

Answer 1

Ich habe Ihren Code umgeschrieben. Schauen Sie sich die diff here, Beispiel arbeiten - https://jsfiddle.net/keqknbLb/1/

Achten I Datenbindung Code bewegt, in Ihrem Beispiel, Sie gelten Daten vor .call(yAxis) als Ergebnis fünf x-Achse geschaffen.

-Code für Text Ausrichten mit einigen Kommentaren:

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