我想在无序列表中动态创建 anchor 标记:
手动执行此操作:
<h2>
Without d3
</h2>
<ul id="anotherList">
<li>
<a href="http://www.google.com">
<text>hello</text></a>
</li>
<li>
<a href="http://www.google.com">
<text>hello</text></a>
</li>
<li>
<a href="http://www.google.com">
<text>hello</text></a>
</li>
<li>
<a href="http://www.google.com">
<text>hello</text></a>
</li>
<li>
<a href="http://www.google.com">
<text>hello</text></a>
</li>
</ul>
因此,d3 构建的 HTML 结构应该类似于上面的示例。我的 d3 代码如下所示:
var data = [1,2,3,4,5];
d3.select("#divListElement")
.selectAll("li")
.data(data)
.enter()
.append("li")
.append("a")
.attr("xlink:href", "http://www.google.de")
.append("text")
.text("hello");
当我检查两者的 DOM 结构时,我发现它们确实是相同的。然而,没有 d3 (手动创建)的示例可以工作,而有 d3 的示例则不起作用,即使它是相同的结构?
最佳答案
xlink:href 适用于 svg 使用(尽管它看起来可能已被弃用),如果您要向 a 标记添加 href,只需使用 href
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
.attr("href", "http://www.google.de")
关于javascript - 使用 d3js 在无序列表元素中创建 anchor 标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40048970/