Question

我想在无序列表中动态创建锚标记：

手动实现：

<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使用（虽然看起来可能已弃用），如果要向标记添加href，只需使用href https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

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

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

1 个答案: