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附加格后追加空格

回答

相关问题