CODEWITHSUNDEEP
javascripthtmld3.jsspace
mike
mike

Reputation: 23811

Render space as only character in div text element

I'm appending a div for each character in a string to transition them in separately: 

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)

The issue is that spaces do not take up space (even though they are treated as data) -- see http://jsbin.com/tiluwi/1/edit

Upvotes: 1

Views: 359

Answers (2)

Man Programmer
Man Programmer

Reputation: 5356

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)

or for text method 

.append('text').text(function(d,i) {if(d.match(/\s+/))return '\u00A0'; return d})

Upvotes: 0

Steve P
Steve P

Reputation: 19377

Using this answer I see that you can use the unicode character to get   into the div.

Something like this:

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

Upvotes: 1

Related Questions