d3.js——文本换行

最新推荐文章于 2022-12-02 14:49:04 发布

AryaoO

最新推荐文章于 2022-12-02 14:49:04 发布

阅读量6k

点赞数

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

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51392767

版权

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

摘要由CSDN通过智能技术生成

常规设置：

 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",te