gpt4 book ai didi

javascript - 在没有嵌套的情况下在 d3 中附加标签

转载 作者:行者123 更新时间:2023-11-28 15:01:21 25 4
gpt4 key购买 nike

我想为每个 <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")

提前感谢您的帮助

最佳答案

d3 的 .insert() (同时出现在 v3v4+ 选择 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>

关于javascript - 在没有嵌套的情况下在 d3 中附加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50094394/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com