Javascript d3追加div后追加空格

我有以下代码：

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

这将创建一个div彼此平行的结构，如

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

我有一张唱片

display: inline-block;

如何很好地插入这些空格

---

---

到目前为止，我已经有了jquery的解决方案，但我真的很想知道如何在d3中使用

来实现它。每个
都可以点击元素列表，只需在每个
之前添加一个空格：

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伪元素没有为我做这件事。所以我做了上面提到的一个“可怕的黑客”，我想和大家分享一下这篇文章的完整性：

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

let div=d3.选择（“#footer”）
div.html（div.html（）.replace（//gi，'））

它完全按照这里的要求做了；）
 简单的回答是，没有可怕的黑客，你就无法做到。但是，您可以在每个
div
之后附加一个空的
div
，您可以在每个
div
之后指定一定的宽度。我需要证明，所以恒定宽度不是一个选项，只是可能，额外的空白可以通过伪元素实现。例如：
div:：在{content:''之后；宽度：5px；显示：inline block；}
或类似的内容。
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', ' ')
  });
...

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

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