Edit in JSFiddle

<svg width=960 height=500>
  <line x1=10 x2=850 y1=200 y2=200 style="stroke: green"></line>
  <text x=926 y=200.5 style="dominant-baseline:central;fill: green; font-size: 14px;">y=0</text>
  <g class="terms" transform="translate(20,200)">
    <text x=0 dominant-baseline= "alphabetic" >漢</text>
    <text x=80 baseline-shift="-24%">漢</text>
    <text x=160 dominant-baseline="ideographic">漢</text>
    <text x=240 dominant-baseline="hanging">漢</text>
    <text x=320 dominant-baseline="mathematical">漢</text>
    <text x=400 dominant-baseline="middle">漢</text>
    <text x=480 dominant-baseline="central">漢</text>
    <text x=560 dominant-baseline="text-before-edge">漢</text>
    <text x=640 dominant-baseline="text-after-edge">漢</text>
  </g>
  <g class="labels" transform="translate(50,120)" >
    <text x=0 transform="rotate(-45)">alphabetical</text>
    <text x=80 transform="translate(10, 70),rotate(-45)">baseline-shift: -24%</text>
    <text x=130 y=100 transform="rotate(-45)">ideographic</text>
    <text x=140 y=200 transform="rotate(-45)">hanging</text>
    <text x=190 y=240 transform="rotate(-45)">mathemetical</text>
    <text x=280 y=300 transform="rotate(-45)">middle</text>
    <text x=320 y=350 transform="rotate(-45)">central</text>
    <text x=370 y=410 transform="rotate(-45)">text-before-edge</text>
    <text x=480 y=450 transform="rotate(-45)">text-after-edge</text>
  </g>
</svg>

  var d = [];
  d3.selectAll('.terms text')
    .each(function() { d.push(this.getBBox()) });
  d3.select('svg .terms').selectAll('rect')
    .data(d).enter()
    .append('rect')
    .attr('x', function(d) {return d.x})
    .attr('y', function(d) {return d.y})
    .attr('width', function(d) {return d.width})
    .attr('height', function(d) {return d.height})
    .style('stroke', 'gray')
    .style('stroke-dasharray', '6 6')
    .style('fill', 'none')

.terms{
  font-size: 60px;
  font-family: 'MS 明朝';
}