D3.js實現(xiàn)文本的換行詳解
一、文字換行是什么問題？
現(xiàn)有一字符串：
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);
結(jié)果如下：
可以看到，雖然 text 元素標(biāo)簽的內(nèi)容有整個字符串，但是由于 svg 的寬度只有 300，顯示不了這么長的字符串，因此多余的部分看不到。
怎么辦？自然是要換行。
二、在 text 中添加 tspan 子元素
SVG 中的文本不支持自動換行，需要手動實現(xiàn)。其中一種方法就是使用 tspan 標(biāo)簽。
tspan 是寫在 text 中的，作為其子元素存在。設(shè)置文本屬性的時候，有一個 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">夜來幽夢忽還鄉(xiāng)</tspan> <tspan x="30" dy="1em">小軒窗</tspan> <tspan x="30" dy="1em">正梳妝</tspan> </text>
要注意，tspan 中的 x 屬性是必要的，表示下一行也從 x = 30 處開始顯示。
三、D3 的代碼怎么寫
對于第一節(jié)的字符串，先在 svg 中添加一個 text 元素，但是不設(shè)定其內(nèi)容。
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("，") ;
用逗號作為分隔符，分為幾段。輸出結(jié)果為一個數(shù)組，數(shù)組中的各項是各子字符串。則 strs 的值為：
["云中誰寄錦書來", "雁字回時", "月滿西樓"]
好，接下來是重點，在 text 元素上綁定數(shù)據(jù)，并添加與 strs 長度相同的 tspan 元素。然后，為其 x 和 dy 屬性賦值，再指定字符串內(nèi)容即可。
代碼如下：
text.selectAll("tspan")
.data(strs)
.enter()
.append("tspan")
.attr("x",text.attr("x"))
.attr("dy","1em")
.text(function(d){
return d;
});
結(jié)果如下：
到這我們就基本完成了，下面給大家奉上完整的示例代碼，有需要的可以參考。
完整實例代碼如下
<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>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用D3.js能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動態(tài)和交互式網(wǎng)頁的技術(shù),它的主要優(yōu)勢在于能夠在不刷新整個網(wǎng)頁的情況下與服務(wù)器進行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見Ajax下載文件方式以及報錯解決辦法的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Javascript毫秒數(shù)用法,實例分析了javascript獲取毫秒數(shù)及設(shè)置指定時間毫秒數(shù)的方法,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了細說webpack6 Babel的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript中的Error錯誤對象與自定義錯誤類型詳解
Error是JavaScript中最原始的錯誤對象，作為各種異常的基礎(chǔ)對象，還有多個衍生的具體的錯誤類型，這些錯誤對象類型在nodejs中也可應(yīng)用，這篇文章主要介紹了JavaScript中的Error錯誤對象與自定義錯誤類型,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了基于JavaScript實現(xiàn)隨機點名器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04![javascript[js]獲取url參數(shù)的代碼](http://img.jbzj.com/images/xgimg/bcimg6.png)
多瀏覽器兼容用javascript獲取url參數(shù)的方法比較推薦的一種2007-10-10
JavaScript實現(xiàn)的級聯(lián)算法示例【省市二級聯(lián)動功能】
這篇文章主要介紹了JavaScript實現(xiàn)的級聯(lián)算法,結(jié)合省市二級聯(lián)動下拉菜單功能實例分析了javascript事件響應(yīng)與元素動態(tài)操作實現(xiàn)級聯(lián)算法的相關(guān)技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了JavaScript純色二維碼變成彩色二維碼的方案，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本文主要介紹了分別使用javascript，jquery，css實現(xiàn)瀑布流布局的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02