渲染空間的DIV文本元素的唯一字符

Question

我追加對每個字符一個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

Answer 1

使用this answer我看到您可以使用Unicode字符 到div。

事情是這樣的：

.append('text').text(function(d,i) {return d.replace(' ', '\u00A0')}) 

Answer 2

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 '&nbsp'; 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})