【D3.V3.js系列教程】--（十四）有路径的文字
生活随笔
收集整理的這篇文章主要介紹了
【D3.V3.js系列教程】--（十四）有路径的文字
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【D3.V3.js系列教程】--（十四）有路徑的文字
1、?在 svg 中插入一個 text
// 在 body 中插入一個 svgvar svg = d3.select('body').append('svg');
?
// 在 svg 中插入一個 text
svg.append('text')
.attr('x', 10)
.attr('y', 20)
.style('fill', 'steelblue')
.style('font-size', '24px')
.style('font-weight', 'bold')
.text('.text加入文字測試！');
2、添加文字路徑
// 先在 svg 中插入一個 pathsvg.append('path').attr({
id: 'mypath',
d: 'M50 100Q350 50 350 250Q250 50 50 250'
}).style({
fill: 'none',
stroke: 'green',
'stroke-width': 10
});
.append('textPath').attr({//引用路徑
'xlink:href': '#mypath'
})
3、源碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>testD3-12-text.html</title><script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script><style type="text/css"></style></head><body><script type="text/javascript"> // 在 body 中插入一個 svgvar svg = d3.select('body').append('svg');// 先在 svg 中插入一個 pathsvg.append('path').attr({id: 'mypath',d: 'M50 100Q350 50 350 250Q250 50 50 250'}).style({fill: 'none',stroke: 'green','stroke-width': 10});// 在 svg 中插入一個 textsvg.append('text').attr('x', 10).attr('y', 20).style('fill', 'steelblue').style('font-size', '24px').style('font-weight', 'bold').append('textPath').attr({//引用路徑'xlink:href': '#mypath'}).text('.text加入文字測試！并用xlink:href: #mypath加入了路徑');</script></body> </html>4、效果
?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的【D3.V3.js系列教程】--（十四）有路径的文字的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spoj 8222 Substrings
- 下一篇： 联想T430i安装Win7