我为字符串中的每个字符附加一个div,以便单独转换它们:
var div = d3.select('body').append('div')
var text = div.selectAll('.text').data("this is some text")
text.enter().append('div')
.style('display', 'inline-block')
.append('text').text(function(d,i) {return d})
.style('opacity', 0).attr('class', 'text')
d3.selectAll('.text').transition().delay(function(d,i) {return i*50}).style('opacity', 1)
问题是空格不占用空间(即使它们被视为数据) - 请参阅http://jsbin.com/tiluwi/1/edit
答案 0 :(得分:1)
使用this answer我看到您可以使用unicode字符将
放入div中。
这样的事情:
.append('text').text(function(d,i) {return d.replace(' ', '\u00A0')})
答案 1 :(得分:0)
var div = d3.select('body').append('div')
var text = div.selectAll('.text').data("this is some text")
text.enter().append('div')
.style('display', 'inline-block')
.append('text').html(function(d,i) {if(d.match(/\s+/))return ' '; return d})
.style('opacity', 0).attr('class', 'text')
d3.selectAll('.text').transition().delay(function(d,i) {return i*50}).style('opacity', 1)
或文字方法
.append('text').text(function(d,i) {if(d.match(/\s+/))return '\u00A0'; return d})