javascript - 使用 d3js 在无序列表元素中创建 anchor 标记？

Question

我想在无序列表中动态创建 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 的示例则不起作用，即使它是相同的结构？

http://jsfiddle.net/thadeuszlay/Qh9X5/9211/

Answer 1

xlink:href 适用于 svg 使用(尽管它看起来可能已被弃用)，如果您要向 a 标记添加 href，只需使用 href https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

.attr("href", "http://www.google.de")