When you use a function to define a selection.attr or selection.style,the function is called for each element; the main difference with grouping is that the second argument to your function (i) is the within-group index rather than the within-selection index.
这可能很简单,但由于某种原因,我无法完全理解这一点.有人会善意用一个例子解释这个.
解决方法
the main difference with grouping is that the second argument to your
function (i) is the within-group index rather than the
within-selection index.
还记得传入d3中任何attr,style等函数的索引吗?
... .attr('something',function(d,index) { // major gymnastics with d and index }
因此,当您执行selectAll时,索引从每个组的0开始.
因此,如果您执行两个链式selectAlls,其中第一个(组)级别是行(tr),第二个(子级)级别是单元格(td),则您将传入以下作为2行x 3单元格的索引表
0,1,2,2
代替
0,3,4,5,6
当您使用单个selectAll仅选择6个节点时,这是您所期望的.
以下代码片段说明了这一点
d3.selectAll("#a tr").selectAll("td").text(function(d,index) { return index; }) d3.selectAll("#b td").text(function(d,index) { return index; })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> Grouped cells (i.e. 2 selectAll) <table id="a"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> Ungrouped cells (i.e. 1 selectAll) <table id="b"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
您链接到的页面上的第一个动画(http://bost.ocks.org/mike/selection/)很好地说明了这一点 – 这是相同的标记版本
原文地址:https://www.jb51.cc/js/240668.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。