将空格渲染为div文本元素中的唯一字符

时间:2014-09-19 17:40:51

标签: javascript html d3.js space

我为字符串中的每个字符附加一个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

2 个答案:

答案 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 '&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})