javascript - 路径以及 x 和 y 轴未附加到 d3.js 中的 g 标记

Question

我正在尝试使用 for 循环将图形动态添加到我的网页。每个图表都位于表格的单独行中。但只显示最后一个图表。对于其他人来说，g 元素没有被添加。

这是最后一张图的层次结构(成功的):-tr -> td -> svg -> g(变换) -> g(x 轴) -> g(y 轴) -> 路径

对于另一个，它是:-tr -> td -> svg -> g(变换)

经过进一步分析，我发现在成功的图表中，路径、x 轴和 y 轴的添加次数与循环运行的次数一样多。

这是我的代码:-

// Define the line
    var valueline = d3.svg.line()
        .x(function(d) { return x(d[xA]); })
        .y(function(d) { return y(d[yA]); });

    for(var i = 0; i < yAV.length; i++){
        var yA = yAV[i];

    // Adds the svg canvas
    chart1 = d3.select("#graph table")
    .append("tr")
    .append("td")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Get the data

    d3.json("graphdata.json", function(error, data) {
          data.forEach(function(d) {
            d[xA] = +d[xA];
            d[yA] = +d[yA];
          });

          x.domain(d3.extent(data, function(d) { return d[xA]; }));
          y.domain(d3.extent(data, function(d) { return d[yA]; }));


        // Add the X Axis
        chart1.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);


        // Add the Y Axis
        chart1.append("g")
            .attr("class", "y axis")
            .call(yAxis);  

        // Add the valueline path.
        chart1.append("path")
            .attr("class", "line")
            .attr("d", valueline(data));


    });

    }

请帮我解决这个问题。

Answer 1

d3.json 中的回调是异步的。您期望它像这样运行:

loop iteration 1:
  chart1 = add new svg/g 
  d3.json add stuff to chart1
loop iteration 2:
  chart1 = add new svg/g
  d3.json add stuff to chart1
loop iteration 3: etc

但是 d3.json 回调仅在数据加载时运行，并且在基于浏览器的 javascript 中，仅在 javascript 完成执行其当前代码(整个循环)时运行 - 请参阅 Javascript asynchronous execution: will a callback interrupt running code? .

所以你会得到的是:

loop iteration 1:
  chart1 = add svg/g 
loop iteration 2:
  chart1 = add svg/g
loop iteration3: etc
end of loop
then
a set of d3.json callbacks adding stuff to last value of chart1

最后一行就是为什么您只看到 d3.json 回调中的元素添加到一个 svg

要修复这个问题，您需要在 d3.json 回调中添加一个计数器，该计数器在每次运行时都会递增，以访问 svg 元素和数据集的正确索引(您认为每次似乎都是相同的数据集吗？)