d3.js v4:如何访问父组的数据索引? [英] d3.js v4: How to access parent group's datum index?

问题描述

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

The description of the selection.data function includes an example with multiple groups (link) where a two-dimensional array is turned into an HTML table.

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

In d3.js v3, for lower dimensions, the accessor functions included a third argument which was the index of the parent group's datum:

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

在 v4 中，此 j 参数已被选择的 NodeList 替换.我现在如何访问父组的数据索引?

In v4, this j argument has been replaced by the selection's NodeList. How do I access the parent group's datum index now?

推荐答案

好吧，有时答案并不能提供解决方案，因为该解决方案可能不存在.似乎是这样.

Well, sometimes an answer doesn't provide a solution, because the solution may not exist. This seems to be the case.

根据博斯托克的说法:

我已将新的双级选择实现合并到 master 中，并通过使用并行父级数组简化了跟踪父级的方式.

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

这种新方法的一个很好的特性是 selection.data 可以以与其他完全相同的方式评估 values 函数选择函数:值函数被传递 {d, i, nodes}其中 this 是父节点，d 是父数据，i 是父节点(group) 索引，nodes 是父节点的数组(每组一个).此外，父数组可以被不支持的子选择重用重新组合选择，例如 selection.select，因为父母数组是不可变的.

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.

此更改限制了功能 - 从某种意义上说，您不能从选择函数中访问父节点，也不是父数据，也不是组索引——但我相信这最终是 A好东西，因为它鼓励更简单的代码.

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 检索父组索引，如下面的片段所示).

So, it's not possible to get the index of the parent's group using selection (the parent's group index can be retrieved using selection.data, as this snippet bellow shows).

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), "
Index: " + JSON.stringify(i), "
Node: " + JSON.stringify(j)); return d})
    .enter()
    .append("rect");

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

这篇关于d3.js v4:如何访问父组的数据索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！