【 D3.js 高级系列 — 1.0 】文本的换行

最新推荐文章于 2023-05-16 00:15:00 发布

DecemberCafe

最新推荐文章于 2023-05-16 00:15:00 发布

阅读量1.1w

点赞数 2

分类专栏： D3.js D3 数据可视化 - 高级系列文章标签： text tspan 换行文本 d3

本文链接：https://blog.csdn.net/lzhlzz/article/details/44017601

版权

本文介绍了如何在SVG中解决文本换行问题，通过使用D3.js结合tspan元素手动实现文本换行。文章详细讲解了tspan的dy属性和x属性的设置，以及如何在D3.js中绑定数据创建多行文本。

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

在 SVG 中添加文本是使用 text 元素。但是，这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？

高级系列开篇前言

从今天开始写高级系列教程。还是那句话，由于本人实力有限，不一定保证入门-进阶-高级，是一级比一级难的，大家选自己需要的阅读即可。

高级系列预计会先写一些常见的小问题（如本文）和剩下的三个布局（矩阵树图、堆栈图、捆图），然后写一些较复杂的图的制作方法，以及其交互式操作，例如：思维导图、多图联动、地图的标线标注等等。

近来嗓子像火烧一样，很不舒服，希望能快点好。o(>﹏<)o

现有一字符串：

var str = "云中谁寄锦书来，雁字回时，月满西楼";

李清照的一剪梅，读过吗？

在 body 里添加一个 svg 元素，大小如下：

var width = 300;
var height = 300;
		
var svg = d3.select("body")
		.append("svg")
		.attr("width",width)
		.attr("height",height);

然后添加文字，用 text

关注

专栏目录