SVG textで改行 part.2

古いブラウザでも動くが、x座標をtranslateで調整しているのであまりスマートではない。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>SVG textで改行</title>
<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width: 100%; height: 100%; }
</style>
</head>

svg .append("text")
    .attr("text-anchor","end")
    .attr("transform", "translate(230, 200)")    
    .selectAll("tspan")
    .data(textArray)
    .enter()
    .append("tspan")
    .attr("y", (d,i) => `${i + i*0.2}em`)
    .attr("x", "0em")
    .text(d => d);
  
    svg .append("text")
    .attr("text-anchor","middle")
    .attr("transform", "translate(160, 300)")    
    .selectAll("tspan")
    .data(textArray)
    .enter()
    .append("tspan")
    .attr("y", (d,i) => `${i + i*0.2}em`)
    .attr("x", "0em")
    .text(d => d);
  
</script>
</body>

https://unpkg.com/babel-standalone@6.26.0/babel.min.js

https://unpkg.com/d3@4.12.2/build/d3.min.js