D3 svg text标签控制

最新推荐文章于 2025-03-16 17:38:08 发布

Claroja

最新推荐文章于 2025-03-16 17:38:08 发布

阅读量1.3w

点赞数 4

分类专栏： D3 文章标签： d3

本文链接：https://blog.youkuaiyun.com/claroja/article/details/80237440

版权

D3 专栏收录该内容

29 篇文章

订阅专栏

没有任何控制，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>