D3.js实现文本的换行详解

一、文字换行是什么问题？

现有一字符串：

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

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

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

var width = 300;
var height = 300; 

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

然后添加文字，用 text 元素，这样的代码我们很熟悉了：

var text = svg.append("text")
  .attr("x",30)
  .attr("y",100)
  .attr("font-size",30)
  .attr("font-family","simsun")
  .text(str);

结果如下：

可以看到，虽然 text 元素标签的内容有整个字符串，但是由于 svg 的宽度只有 300，显示不了这么长的字符串，因此多余的部分看不到。

怎么办？自然是要换行。

二、在 text 中添加 tspan 子元素

SVG 中的文本不支持自动换行，需要手动实现。其中一种方法就是使用 tspan 标签。

tspan 是写在 text 中的，作为其子元素存在。设置文本属性的时候，有一个 dy 属性，表示 y 轴的相对位移，dy 的值通常用 10px、1em 这样的值，其中 em 是以行为单位的。

这样，我们就可以在 text 中添加多个 tspan ，每个代表一行。每一个 tspan 属性都赋予一个 1em 值（即一行）。如此，文本就会一行一行地显示了。

svg代码为：

<text x="30" y="100" font-size="30" font-family="simsun">
<tspan x="30" dy="1em">夜来幽梦忽还乡</tspan>
<tspan x="30" dy="1em">小轩窗</tspan>
<tspan x="30" dy="1em">正梳妆</tspan>
</text>

要注意，tspan 中的 x 属性是必要的，表示下一行也从 x = 30 处开始显示。

三、D3 的代码怎么写

对于第一节的字符串，先在 svg 中添加一个 text 元素，但是不设定其内容。

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

var text = svg.append("text")
    .attr("x",30)
    .attr("y",100)
    .attr("font-size",30)
    .attr("font-family","simsun");

使用 JavaScript 字符串的 split 将 str 分段：

var strs = str.split("，") ;

用逗号作为分隔符，分为几段。输出结果为一个数组，数组中的各项是各子字符串。则 strs 的值为：

["云中谁寄锦书来", "雁字回时", "月满西楼"]

好，接下来是重点，在 text 元素上绑定数据，并添加与 strs 长度相同的 tspan 元素。然后，为其 x 和 dy 属性赋值，再指定字符串内容即可。

代码如下：

text.selectAll("tspan")
  .data(strs)
  .enter()
  .append("tspan")
  .attr("x",text.attr("x"))
  .attr("dy","1em")
  .text(function(d){
   return d;
  });

结果如下：

到这我们就基本完成了，下面给大家奉上完整的示例代码，有需要的可以参考。

完整实例代码如下

<html>
 <head>
  <meta charset="utf-8">
  <title>文字换行</title>
 </head>
 <body>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>  

 var width = 300;
 var height = 300;

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

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

 var text = svg.append("text")
  .attr("x",30)
  .attr("y",100)
  .attr("font-size",30)
  .attr("font-family","simsun");

 var strs = str.split("，") ;

 console.log(strs);

 text.selectAll("tspan")
 .data(strs)
 .enter()
 .append("tspan")
 .attr("x",text.attr("x"))
 .attr("dy","1em")
 .text(function(d){
  return d;
 });

  </script> 

 </body>
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用D3.js能有所帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • D3.js实现折线图的方法详解

    D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

  • D3.js实现饼状图的方法详解

    D3.js实现饼状图的方法详解

    前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • D3.js实现雷达图的方法详解

    D3.js实现雷达图的方法详解

    前言 再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC

  • d3.js实现简单的网络拓扑图实例代码

    d3.js实现简单的网络拓扑图实例代码

    前言 了解了D3.js的基本开发和组件以后,我们开始应用它激动人心之处:绚丽的预定义图形,应用D3.js,我们在它的示例文件的基础上稍加变动即可应用于我们的数据可视化工作中,D3.js将后台的运算已经预定义好,我们只需少量代码和规范的数据,就能做出很花哨(请原谅我的用词不当)的效果. 力学图(也称为导向图,也有叫网络拓补图的,反正就是通过排斥得到关系远近的结构)在社交网络研究.信息传播途径等群体关系研究中应用非常广泛,它可以直观地反映群体与群体之间联系的渠道.交集多少,群体内部成员的联系强度等.

  • D3.js中强制异步文件读取同步的几种方法

    D3.js中强制异步文件读取同步的几种方法

    发现问题 在使用d3.js时,我们经常会使用d3.csv()或者d3.json()函数来从文件中读取出数据,不幸的是,偶尔代码的结果并不是我们预料的那样.习惯了过程式编程的我开始的时候也是这样,最让人头疼的是javascript并不会告诉你问题出在哪里了.我第一次遇到这个问题的时候,找了半天bug,确定代码主体部分没有问题之后,我只能开始使用console.log()将变量一个一个的输出到控制台里. 第一次遇到这个问题时的图片是这样的: 问题出在第72行和第75行,中间几行完全没有对ordert

  • D3.js实现柱状图的方法详解

    D3.js实现柱状图的方法详解

    D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加

  • D3.js 从P元素的创建开始(显示可加载数据)

    D3.js 从P元素的创建开始(显示可加载数据)

    D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起. html的基本框架不多说,先上代码再解释: 新建一个test目录,在该目录下创建demo和d3两个文件夹.demo存放要编写的html文件 , d3存放d3.v3.js 在demo文件夹下新建indexP.html,将下面代码复制其中,双击在浏览器打开查看效果. <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • D3.js中data(), enter() 和 exit()的问题详解

    D3的应用非常广泛,现在成为了主流数据可视化工具之一.大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作. 在我接触一段时间,有了一些了解之后,简单说说我的理解. data() 先看一个例子: <body> <p></p> <p></p> <p></p> </body> 执行代码: d3.select("body").selectAl

  • 基于d3.js实现实时刷新的折线图

    基于d3.js实现实时刷新的折线图

    先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri

随机推荐