Javascript向多个div添加动态标签

Question

我有以下 JavaScript

d3.select(".chart")
      .selectAll("div")
      .data(data)
      .enter().append("div")
      .style("width", function(d) { return x(d) + "px"; })
      .text(function(d) { return d; });

它使用 data 变量中的数据创建一个条形图。目前(我认为)它正在获取每个数据，在其周围创建一个 div，使用宽度对其进行样式设置并附加文本。查看网络开发控制台，看起来像这样

<div style="width: 244.579px;">29.29</div>
<div style="width: 273.875px;">32,45</div>
....

div 的数量等于 data 数组的长度。

在 View 页面上，我列出了一堆 div 中的实际数据，每个 div 都有一个 anchor ，可以像这样附加

<div id = 'anchor_1'>DATA from data[0]</div>
<div id = 'anchor_2'>DATA from data[1]</div>
....

我是 javascript 新手，但是有没有办法调整上面的 javascript，以便它将动态附加一个 a 标签到上面生成的每个 div 中脚本，所以它看起来像

<div style="width: 244.579px;"><a href='#anchor_1'>29.29</a></div>
<div style="width: 273.875px;"><a href='#anchor_2'>32,45</a></div>
....

对于生成的所有 div？我知道如何在 javascript 中创建循环，但我不知道如何真正实现我上面想要的。

Answer 1

所以基本上你想要选择页面上的所有元素并循环它们，你需要区分生成的元素与页面上其他元素的不同之处，一旦你这样做了，剩下的就很容易了，只需循环时动态添加 anchor 标记:

var anchors = ["a1", "a2"]; // assuming you have these

var divs = document.querySelectorAll('#d3-container div') // this needs to change based on how you want to select the generated elements

for(var i=0; i< divs.length; i++) {
  var text = divs[i].innerText;

  divs[i].innerHTML = '<a href='+anchors[i]+' >'+text+'</a>'
}

工作示例:http://plnkr.co/edit/6KHNUBAoV5OP4Ui2UfCA?p=preview

编辑:根据评论更新答案