是什么导致这条线在Angular / D3.js中重复绘制？
萨奇布·阿里（Saqib Ali）
我正在使用这个很棒的教程来学习如何将AngularJS与D3.js库一起使用：http : //briantford.com/blog/angular-d3。本教程按提供的方式工作（感谢Brian！）
但是我正在尝试学习/理解这段代码，以便可以修改它并画出我想要的东西。我只是在包含以下内容的行之前添加了以下代码块var bars = layers.selectAll("g.bar")：
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);
我希望这会画一条单条对角绿线。而是绘制700条以上的对角绿线（请参见下面的屏幕截图）。为什么？我没有看到任何for或while会导致这个循环。那么为什么会这样呢？我在上面插入了console.log行。它打印About to draw line一次。但它印了1702次。为什么？这是the子
那一个人
这行：
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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
d3中数据驱动的垂直/水平线
- 2
寻找D3方式绘制多元系列折线图的均线
- 3
在D3中绘制分层弧
- 4
在d3中，构造.data（[]）。exit（）。remove（）是什么意思？
- 5
d3 SVG中的Angular指令
- 6
在D3 JS中使用对角线函数在两点之间绘制曲线
- 7
如何停止Angular处理d3中的click事件
- 8
删除D3 /酒窝中的刻度线
- 9
在d3中拖动一条线
- 10
制作可重复使用的svg实体所需的d3结构是什么
- 11
无法绘制带有负值的D3曲线
- 12
使用d3.group在D3中进行组线绘图
- 13
d3中数据驱动的垂直/水平线
- 14
d3：平滑地绘制一条手绘线吗？
- 15
D3 js线重叠节点
- 16
d3：d3.select（self.frameElement）.style（“ height”，height +“ px”）中的self是什么？
- 17
如何在d3线中创建折弯
- 18
D3 JS图形不显示线
- 19
从D3中的列表中形成年龄组的最佳方法是什么？
- 20
为什么更新后此D3图表中的线无法正确显示？
- 21
自定义D3 LineChart中的刻度线
- 22
在d3中拖动一条线
- 23
D3：将合并的线绘制为单个
- 24
为什么D3 js之间没有缝隙
- 25
在D3中用线连接矩形
- 26
使用D3投影在画布上绘制GeoJSON线串
- 27
使用d3 js在phant中绘制json数据
- 28
在 D3 v5 JS 中读取 CSV：为什么我无法获取数据？
- 29
在D3 js中通过给定方向移动一条线？
我来说两句