D3附加格後追加空格

我有以下代碼：D3附加格後追加空格

this.other.selectAll('div').data(this.words).call(function(){ 
    this.enter().append('div').each(function() { 
    ...

這產生了這樣的div是沿着彼此的結構，像

<div></div><div></div>

但我希望他們空格分隔

<div></div> <div></div>

與（適用於集裝箱）

text-align: justify;

我有div的

display: inline-block;

如何很好地插入這些空間？

到目前爲止，我有jQuery的一個解決方案，但我真的很想知道如何做到這一點，在d

來源

2014-05-13 user2846569

簡短的回答是你不能沒有可怕的黑客。然而，你可以追加一個空的'div'，在每個'div'之後給出一定的寬度。 –

我需要證明，所以恆定的寬度不是一個選項 – user2846569

也許，也許，多餘的空白可以用僞元素來實現。例如：'div :: after {content：'';寬度：5像素;顯示：內聯塊; ''或類似的東西。 – meetamit

使用.each你可以挖掘到的元素列表，只需每前添加一個空格span：

this.other.selectAll('div').data(this.words).call(function(){ 
    this.enter().append('div').each(function() { 
    if (this.previousSibling && previousSibling.nodeValue == ' ') { 
     return; // Already have a space before this span, don't add another. 
    } 

    this.insertAdjacentHTML('beforebegin', ' ') 
    }); 
...

另一種選擇是使用::after僞元件和non-breaking space character：

div { 
    display: inline-block; 
} 
div::after { 
    content: '\00a0'; // Non-breaking space. 
}

來源

2015-08-30 21:36:01 d2vid

::後僞元素沒有爲我做。所以，我沒有上面所說的「可怕的黑客」，我想分享只是爲這個線程的完整性，其中之一：

let div = d3.select('#footer') 
div.html(div.html().replace(/<\/div><div>/gi, '</div> <div>'))

而且這也正是在這裏問;）

來源

2016-08-25 16:12:44 Dominic

D3附加格後追加空格

回答

相關問題