在d3中添加没有嵌套的标记

Question

我想为每个<p>标记生成包含工具提示和工具提示文本的html。我知道我可以在d3中完成所有的工具提示，但我现在使用的是css样式，因为它更熟悉。

在理想的世界中，我的html 输出看起来像：

<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">Tooltip text</span>
</p>
<br>
<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">filler text</span>
</p>

我使用<br>，因为否则p标记中的文本会出现在同一行上，但我遇到的问题是<br>被嵌套在span标记中，所以我的html输出如下所示。

<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">Tooltip text <br></span>
</p>
<p class="tooltip" style="font-size: 73.6207pt;">eyes.
  <span class="tooltiptext">filler text <br></span>
</p>

我的d3看起来是这样的：

我尝试过移动那个.append("d3")，但它要么破坏了工具提示，要么只会破坏整个可视化过程。

div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })
  .style("font-size", function(d) {
     return scale(parseInt(d.score))  + "pt";
  })
  .append('span')
  .attr("class", "tooltiptext")
  .text("filler text")
  .append("br")

提前感谢你的帮助

Answer 1

D3的.insert()(同时存在于v3或v4+选择API中)只插入一个元素一次，所以当您有两个以上的<p>元素时，它可能不会太有用。相反，只需遍历所有<p>节点，并使用本机JS Element.insertBefore()方法来完成您想要做的事情:即在每个<p>元素之后插入一个<br />。

在本例中，我们只是不对第一个遇到的insertBefore()元素调用<p>，然后对所有其他元素调用它。

var paragraphs = div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })

paragraphs.append('span')
  .attr("class", "tooltiptext")
  .text("filler text");

// Iterate through all inserted paragraphs
paragraphs.each(function(d, i) {

  // Do not insert if first `<p>` is encountered
  if (i === 0)
    return;

  this.parentNode.insertBefore(document.createElement('br'), this);
});

见下文的概念证明：

​

var div = d3.select('div');
var myData = [{
  word: 'Lorem ipsum dolor sit amet'
}, {
  word: 'Consectetur adipiscing elit'
}, {
  word: 'Nam id sollicitudin magna'
}, {
  word: 'Pharetra rutrum nisl'
}];

var paragraphs = div.selectAll(null)
  .data(myData)
  .enter()
  .append("p")
  .attr("class", "tooltip")
  .text(function(d) {
     return d.word;
  })

paragraphs.append('span')
  .attr("class", "tooltiptext")
  .text("filler text");

// Iterate through all inserted paragraphs
paragraphs.each(function(d, i) {

  // Do not insert if first `<p>` is encountered
  if (i === 0)
    return;
    
  this.parentNode.insertBefore(document.createElement('br'), this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div></div>

​