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，使用宽度设置样式并附加文本。通过Web开发控制台查看它似乎是这样的

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

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

在视图页面上，我列出了一堆div中的实际数据，每个div都有一个准备好像这样附加的锚

<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

所以基本上你想要选择你页面上的所有元素并循环它们，你需要区分生成的元素与你页面上其他元素的不同之处，一旦你这样做，休息很简单，只需要在循环时动态添加锚标记：

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

编辑：根据评论

更新了答案

Answer 2

仅限D3方法：

d3.select(".chart")
      .selectAll("div")
      .data(data)
      .enter().append("div")
      .style("width", function(d) { return x(d) + "px"; })
      .append("a")
      .attr("xlink:href","http://www.stackoverflow.com")  
      .append("text")
      .attr("text-anchor", "middle")
      .text(function(d) { return d; });

Javascript将动态标签添加到多个div

2 个答案: