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.

根据Bostock：

ve将新的二级选择实现合并到主表中，并简化了如何通过使用并行父表数组来跟踪父表。

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}
其中这是父节点，d是父节点datum，i是父
（组）索引，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
Good Thing，因为它鼓励更简单的代码。

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

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

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