javascript - 如何为每个 for 循环迭代创建单独的标签？

Question

我正在使用 d3 和 javascript 在 html 页面的列中显示来自 csv 文件的数据。一个 csv 一切正常(html 输出看起来像这样)

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

对于多列，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> 

然而，当我尝试在循环中生成标签时，我的输出只是:

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

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

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";
                    });
        })
}

Answer 1

这里有一个根本性的问题，就是使用一个带有异步函数的for循环。它根本行不通。

问题是:

d3.csv是一个异步函数，也就是说，代码不等待来自 d3.csv 的响应(如果您使用的是 D3 v4，则为 XHR；如果您使用的是 D3 v5，则为 promise)其余的继续运行。因此，for循环不等待每个人 d3.csv在进入下一次迭代之前完成:事实上，for循环将在几毫秒内运行到结束。

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

有几种方法可以解决这个问题。这是一个可能的解决方案，虽然不是最优雅但很容易理解:do 4 separate 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";
    });

}

用于创建 <h1>你可以保留一个外部计数器，就像我在这里所做的那样，但只是作为一个例子(这不是一个好方法)。