是什么导致在Angular / D3.js中重复绘制此行？

Question

我正在使用这个很棒的教程来学习如何在AngularJS中使用D3.js库：http://briantford.com/blog/angular-d3。本教程按照提供的方式工作（感谢Brian！）

但是我正在努力学习/理解这段代码，这样我就可以把它搞砸并画出我想要的东西。我只是在包含<img title='<%# Eval ("ProductDescription") %>' ：

的行之前添加了以下代码块

var bars = layers.selectAll("g.bar")

我预计这会绘制一条对角绿线。相反，它绘制了700多条对角绿线（见下面的截图）。为什么？我没有看到任何导致此问题的 console.log('Setup'); var grid = layers.selectAll("g.grid") .data(function(d) { return d; }) .enter().append("g") .attr("class", "grid") .attr("transform", function(d) { console.log("1"); return "translate(" + x(d) + ",0)"; }); console.log('About to draw a line'); grid.append("line") // attach a line .style("stroke", "green") // colour the line .attr("x1", 100) // x position of the first end of the line .attr("y1", 50) // y position of the first end of the line .attr("x2", 300) // x position of the second end of the line .attr("y2", 150); 或for循环。那为什么会这样呢？我在上面插入了console.log行。它打印了while一次。但它打印About to draw line次702次。为什么？这是plunker

Answer 1

这一行：

grid.append("line")  

在网格上添加一行，这意味着您正在使用网格中的相同数据。因为你的网格是这样的：

var grid = layers.selectAll("g.grid")
        .data(function(d) { return d; })

它使用来自图层的相同数据：

var layers = vis.selectAll("g.layer")
            .data(data)

所以，这个数据长度为18，但是每个数据都有一个包含39个元素的数组，因此18x39=702就是你拥有的行数。

基本上您想要将行追加到vis而不是网格，否则您将使用相同的数据。

vis.append("line")          // attach a line
          .style("stroke", "green")  // colour the line
          .attr("x1", 100)     // x position of the first end of the line
          .attr("y1", 50)      // y position of the first end of the line
          .attr("x2", 300)     // x position of the second end of the line
          .attr("y2", 150);

更新了Plnkr：https://plnkr.co/edit/MTQ9pNWL2784jPfRWH5F?p=preview