Javascript 如何为每个for循环迭代创建单独的标记？

我使用d3和javascript在html页面的列中显示csv文件中的数据。一天之内，一切都很好 （html输出如下所示）

第1栏
//从csv生成的p标记

对于多个列，html应如下所示：

<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
// p tags generated from csv here 
</div> 
<div class="column" style="background-color:#aaa;">
<h2>Column 2 </h2>
// p tags generated from csv 2 here 
</div> 
<div class="column" style="background-color:#aaa;">
<h2>Column n </h2>
// p tags generated from csv n here 
</div> 

var i;
array = ["72.csv", "122.csv", "124.csv", "12.csv",]
for (i = 0; i < 4; i++) { 

    document.getElementById("inner").innerHTML="<div class=\"column\" style=\"background-color:#aaa;\">";
    var dataPath = array[i]
    d3.csv(dataPath, function (error, data){
        var myData = data;
        var booksExtent = d3.extent(myData, function(d) {
            return parseInt(d.score)
        });
            var scale = d3.scaleLinear()
                .range([9, 20])
                .domain([12,85])
            d3.select(".column")
                .selectAll("p")
                    .data(myData)
                    .enter()
                    .append("p")
                        .text(function(d){
                        return d.word; 
                    })
                    .style("font-size", function (d)
                    {
                        return scale(parseInt(d.score)) + "pt";
                    });
        })
}

第1栏
//从csv生成的p标记
第2栏
//这里是csv 2生成的p标记
第n列
//从csv n生成的p标记

但是，尝试在循环中生成标记时，我的输出仅为：

<div class="column" style="background-color:#aaa;">
<h2>Column n </h2>
// p tags generated from csv n here 
</div>

第n列
//从csv n生成的p标记

只有最后一个csv被写入dom，我不知道为什么。到目前为止，我的代码如下所示：

<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
// p tags generated from csv here 
</div> 
<div class="column" style="background-color:#aaa;">
<h2>Column 2 </h2>
// p tags generated from csv 2 here 
</div> 
<div class="column" style="background-color:#aaa;">
<h2>Column n </h2>
// p tags generated from csv n here 
</div> 

var i;
array = ["72.csv", "122.csv", "124.csv", "12.csv",]
for (i = 0; i < 4; i++) { 

    document.getElementById("inner").innerHTML="<div class=\"column\" style=\"background-color:#aaa;\">";
    var dataPath = array[i]
    d3.csv(dataPath, function (error, data){
        var myData = data;
        var booksExtent = d3.extent(myData, function(d) {
            return parseInt(d.score)
        });
            var scale = d3.scaleLinear()
                .range([9, 20])
                .domain([12,85])
            d3.select(".column")
                .selectAll("p")
                    .data(myData)
                    .enter()
                    .append("p")
                        .text(function(d){
                        return d.word; 
                    })
                    .style("font-size", function (d)
                    {
                        return scale(parseInt(d.score)) + "pt";
                    });
        })
}

vari；
数组=[“72.csv”、“122.csv”、“124.csv”、“12.csv”，]
对于（i=0；i<4；i++）{
document.getElementById（“内部”）.innerHTML=“”；
var dataPath=array[i]
d3.csv（数据路径、函数（错误、数据）{
var myData=数据；
var booksExtent=d3.extent（myData，函数（d）{
返回parseInt（d.score）
});
var scale=d3.scaleLinear（）
.范围（[9,20]）
.domain（[12,85]）
d3.选择（“.列”）
.全选（“p”）
.数据（myData）
.输入（）
.附加（“p”）
.文本（功能（d）{
返回d.word；
})
.样式（“字体大小”，功能（d）
{
返回量表（parseInt（d.score））+“pt”；
});
})
}

这里有一个基本问题，那就是将for循环与异步函数一起使用。这根本行不通

这就是问题所在：

d3.csv

是一个异步函数，也就是说，代码不会等待来自

d3.csv

的响应（如果使用的是d3 v4，则为XHR，如果使用的是d3 v5，则为promise），其余部分将继续运行。因此，

for

循环在进入下一个迭代之前不会等待每个

d3.csv

完成：事实上，

for

循环将在几毫秒内结束

因此，您必须重构所有代码

有几种方法可以解决此问题。这是一个可能的解决方案，虽然不是最优雅但很容易理解：执行4个单独的

d3.csv

调用，每个csv调用一个，并将数据传递给附加元素的函数：

d3.csv("72.csv", createElements);
d3.csv("122.csv", createElements);
d3.csv("124.csv", createElements);
d3.csv("12.csv", createElements);

var counter = 0;

function createElements(myData) {

  counter++;

  var div = d3.select("#inner")
    .append("div")
    .attr("class", "column")
    .style("background-color", "#aaa");

  div.append("h1")
    .text("Column " + counter);

  var booksExtent = d3.extent(myData, function(d) {
    return parseInt(d.score)
  });

  var scale = d3.scaleLinear()
    .range([9, 20])
    .domain([12, 85]);

  div.selectAll(null)
    .data(myData)
    .enter()
    .append("p")
    .text(function(d) {
      return d.word;
    })
    .style("font-size", function(d) {
      return scale(parseInt(d.score)) + "pt";
    });

}

对于创建

，您可以保留一个外部计数器，正如我在这里所做的，但只是作为一个示例（这不是一个好方法）