javascript - 在没有嵌套的情况下在 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 中的文本标 checkout 现在同一行，但我遇到的问题是 <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() 方法来做你想做的事:这是插入一个 <br />每 <p> 之后元素。

在这种情况下，我们根本不调用 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>