Question

我有以下代码：

 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;

我有divs

display: inline-block;

如何很好地插入这些空格？

到目前为止，我有一个jquery的解决方案，但我真的很想知道如何在d3中做到这一点

Answer 1

使用.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.
}

Answer 2

:: after伪元素并没有为我做。所以我做了上面提到的其中一个＆＃34;可怕的黑客＆＃34;，我想分享这个线程的完整性：

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

它完全按照这里的要求行事;）

d3在附加div之后追加空格

2 个答案: