【d3 tspan append】金鞍玉勒寻芳客,未信我庐别有春。这篇文章主要讲述d3 tspan append相关的知识,希望能为你提供帮助。
http://bl.ocks.org/enjalot/1829187
index.html#
<
html>
<
meta charset=‘utf-8‘ />
<
head>
<
/head>
<
body>
<
svg>
<
text id=‘text_node‘ y="20px" text-anchor="start" opacity="1">
<
tspan>
You<
/tspan>
<
tspan dx=‘.5em‘>
shall<
/tspan>
<
tspan dx=‘.5em‘ dy=‘.9em‘>
not<
/tspan>
<
tspan dx=‘.4em‘ dy=‘.9em‘>
pass<
/tspan>
<
/text>
<
/svg>
<
script src="https://mbostock.github.com/d3/d3.js">
<
/script>
<
script>
var node = document.getElementById(‘text_node‘);
var bbox = node.getBBox();
var computed_text_length = node.getComputedTextLength();
//Does not work
text_node = d3.select(‘#text_node‘)
text_node.append(‘tspan‘)
.text(‘Fly‘)
.attr(‘dx‘, ‘.2em‘)
text_node.append(‘tspan‘)
.text(‘you‘)
.attr(‘dx‘, ‘.2em‘)
.attr(‘dy‘, ‘.9em‘)
text_node.append(‘tspan‘)
.text(‘fools‘)
.attr(‘dx‘, ‘.2em‘)
.attr(‘dy‘, ‘.9em‘)/*
d3.select(‘#text_node‘).append(‘tspan‘)
.text(‘Fly‘)
.attr(‘dx‘, ‘.2em‘)
.attr(‘dy‘, ‘.9em‘)d3.select(‘#text_node‘).append(‘tspan‘)
.text(‘you‘)
.attr(‘dx‘, ‘.2em‘)
.attr(‘dy‘, ‘.9em‘)
*/console.log(‘BBOX width: ‘, bbox.width);
console.log(‘Computed text length: ‘, computed_text_length);
<
/script>
<
/body>
<
/html>
LICENSE
推荐阅读
- uni-app实现APP的版本更新
- springboot+druid报错log4j:WARN No appenders could be found for logger (druid.sql.Connection). log4j:WA
- fiddler抓包+雷电模拟器完成手机app抓包的配置
- uniapp/vue在页面中强制更改组件样式
- Android蓝牙读取短信调研
- 区块链钱包系统开发方案,多币种钱包搭建app
- git clone android source code抛出error: invalid path 'luni/src/test/resources/org/apache/harmony/t
- 彻底解决appium 自动化测试时总是自动安装appium android input manager for unicode
- C#实现对象映射AutoMapper