d3.js v4 : How to access parent group's datum index?

Question

selection.data的说明函数包括一个带有多个组的示例 ( link )，其中将二维数组转换为 HTML 表格。

在 d3.js v3 中，对于较低维度，访问器函数包含第三个参数，即父组数据的索引:

td.text(function(d,i,j) {
  return "Row: " + j;
});

在 v4 中，这个 j参数已被选择的 NodeList 替换。我现在如何访问父组的数据索引？

Answer 1

好吧，有时答案并不能提供解决方案，因为该解决方案可能不存在。情况似乎如此。

根据博斯托克的说法:

I’ve merged the new bilevel selection implementation into master and also simplified how parents are tracked by using a parallel parents array.

A nice property of this new approach is that selection.data can evaluate the values function in exactly the same manner as other selection functions: the values function gets passed {d, i, nodes} where this is the parent node, d is the parent datum, i is the parent (group) index, and nodes is the array of parent nodes (one per group). Also, the parents array can be reused by subselections that do not regroup the selection, such as selection.select, since the parents array is immutable.

This change restricts functionality—in the sense that you cannot access the parent node from within a selection function, nor the parent data, nor the group index — but I believe this is ultimately A Good Thing because it encourages simpler code.

(强调我的)

这是链接: https://github.com/d3/d3-selection/issues/47

因此，不可能使用 selection 获取父组的索引。 (可以使用 selection.data 检索父组索引，如下面的代码段所示)。

var testData = [
[
  {x: 1, y: 40},
  {x: 2, y: 43},
  {x: 3, y: 12},
  {x: 6, y: 23}
], [
  {x: 1, y: 12},
  {x: 4, y: 18},
  {x: 5, y: 73},
  {x: 6, y: 27}
], [
  {x: 1, y: 60},
  {x: 2, y: 49},
  {x: 3, y: 16},
  {x: 6, y: 20}
 ] 
];

var svg = d3.select("body")
	.append("svg")
  .attr("width", 300)
  .attr("height", 300);
  
var g = svg.selectAll(".groups")
    .data(testData)
    .enter()
    .append("g");
    
var rects = g.selectAll("rect")
    .data(function(d, i , j) { console.log("Data: " + JSON.stringify(d), "\nIndex: " + JSON.stringify(i), "\nNode: " + JSON.stringify(j)); return d})
    .enter()
    .append("rect");

<script src="https://d3js.org/d3.v4.min.js"></script>