d3.js——文本换行

AryaoO

于 2016-05-13 10:06:33 发布

阅读量6.2k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： split dy tspan 文本换行显示

本文链接：https://blog.youkuaiyun.com/Selina_Chan/article/details/51392767

版权

前端开发基础同时被 2 个专栏收录

46 篇文章

订阅专栏

前端开发——D3

33 篇文章

订阅专栏

在d3.js中，要使文本内容能够换行显示，首先需要使用split方法将字符串分解为多个片段。接着，在text元素内部插入tspan子元素，分别设置每个片段的x坐标和dy偏移量，以此来实现文本的换行布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常规设置：

 var width = 400,
            height = 400;
    var str = "云中谁寄锦书来，雁字回时，月满西楼";
    var svg = d3.select("body").append("svg")
            .attr("width",width)
            .attr("height",height)

如果需要文本显示换行，首先使用split将字符串分为几段：

 var strs = str.split("，")

然后在text下添加“tspan”元素，并完成其x和dy属性的赋值操作即可实现，如下：

 var text = svg.append("text")
            .attr("font-size","14px")
            .attr("x",30)
            .attr("y",100)
            .text(str)
    var texts = text.selectAll("tspan")
            .data(strs)
            .enter()
            .append("tspan")
            .attr("x",text.attr("x"))
            .attr("dy","1em")
            .text(function(d){return d})

运行结果如下：