javascript - d3 在附加的 div 之后附加空格

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;

我有div

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