没有任何控制，text的锚点指向的左下的位置
<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script> svg=d3.select('svg') svg.append('text') .text('text') .attr("x",25) .attr('y',25) // .attr('text-anchor',"middle") // .attr('dy','.35em') svg.append('text') .text('text') .attr("x",50) .attr('y',50) // .attr('text-anchor',"middle") // .attr('dy','.35em') svg.append('line') .attr('x1',25) .attr('y1',25) .attr('x2',50) .attr('y2',50) .attr('stroke','black') </script>
</body>
</html>
水平方向居中
<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script> svg=d3.select('svg') svg.append('text') .text('text') .attr("x",25) .attr('y',25) .attr('text-anchor',"middle") // .attr('dy','.35em') svg.append('text') .text('text') .attr("x",50) .attr('y',50) .attr('text-anchor',"middle") // .attr('dy','.35em') svg.append('line') .attr('x1',25) .attr('y1',25) .attr('x2',50) .attr('y2',50) .attr('stroke','black') </script>
</body>
</html>
水平和垂直方向都居中
<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script> svg=d3.select('svg') svg.append('text') .text('text') .attr("x",25) .attr('y',25) .attr('text-anchor',"middle") .attr('dy','.35em') svg.append('text') .text('text') .attr("x",50) .attr('y',50) .attr('text-anchor',"middle") .attr('dy','.35em') svg.append('line') .attr('x1',25) .attr('y1',25) .attr('x2',50) .attr('y2',50) .attr('stroke','black') </script>
</body>
</html>
也可以通过dx和dy属性设置偏移来实现，这里dx，dy都是将文本相对默认锚点做的偏移。
<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script> svg=d3.select('svg') svg.append('text') .text('text') .attr("x",25) .attr('y',25) // .attr('text-anchor',"middle") .attr('dx','-.8em') .attr('dy','.35em') svg.append('text') .text('text') .attr("x",50) .attr('y',50) .attr('text-anchor',"middle") .attr('dy','.35em') svg.append('line') .attr('x1',25) .attr('y1',25) .attr('x2',50) .attr('y2',50) .attr('stroke','black') </script>
</body>
</html>
<svg:text text-anchor="start">左下</svg:text>
<svg:text text-anchor="middle">中下</svg:text>
<svg:text text-anchor="end">右下</svg:text>
<svg:text dy=".35em" text-anchor="start">左中</svg:text>
<svg:text dy=".35em" text-anchor="middle">中中</svg:text>
<svg:text dy=".35em" text-anchor="end">右中</svg:text>
<svg:text dy=".71em" text-anchor="start">左上</svg:text>
<svg:text dy=".71em" text-anchor="middle">中上</svg:text>
<svg:text dy=".71em" text-anchor="end">右上</svg:text>