Javascript d3.js：两个一维数组的嵌套选择

我想用d3从两个一维数组创建一个表

假设输入数组为：

array1 = ['a','b','c'];
array2 = ['d','e','f'];

我想让桌子看起来像这样

ad  ae  af
bd  be  bf
cd  ce  cf

---

我应该使用嵌套选择吗？或者我应该先调用

selectAll（）.data（）

，然后再调用

each（）

？（，每个矩阵单元的操作不会像

'a'+'d'

那么简单，但我认为这对答案并不重要。）

一种方法是从两个数组中创建一个新的2D数组，使其适合标准嵌套选择模式（请参见：）：

另一种方法是利用函数不仅传递组内元素的索引i，而且传递它所属组的索引j这一事实：

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

d3.select("body").append("table")
  .selectAll("tr")
    // arr1 corresponds to the rows
    // bound data is not used in the td cells; only arr1.length is used
    .data(arr1)
  .enter().append("tr")
  .selectAll("td")
    // arr2 corresponds to the columns
    .data(arr2)
  .enter().append("td")
    .text(function(d, i, j) { return arr1[j] + d; }); // d === arr2[i]

类似的方法使用parentNode而不是索引j从组中获取绑定数据：

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

d3.select("body").append("table")
  .selectAll("tr")
    // arr1 corresponds to the rows
    .data(arr1)
  .enter().append("tr")
  .selectAll("td")
    // arr2 corresponds to the columns
    .data(arr2)
  .enter().append("td")
    .text(function(d) { return d3.select(this.parentNode).datum() + d; });

---

一种方法是从两个阵列中创建一个新的二维阵列，使其适合标准嵌套选择模式（请参见：）：

另一种方法是利用函数不仅传递组内元素的索引i，而且传递它所属组的索引j这一事实：

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

d3.select("body").append("table")
  .selectAll("tr")
    // arr1 corresponds to the rows
    // bound data is not used in the td cells; only arr1.length is used
    .data(arr1)
  .enter().append("tr")
  .selectAll("td")
    // arr2 corresponds to the columns
    .data(arr2)
  .enter().append("td")
    .text(function(d, i, j) { return arr1[j] + d; }); // d === arr2[i]

类似的方法使用parentNode而不是索引j从组中获取绑定数据：

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

d3.select("body").append("table")
  .selectAll("tr")
    // arr1 corresponds to the rows
    .data(arr1)
  .enter().append("tr")
  .selectAll("td")
    // arr2 corresponds to the columns
    .data(arr2)
  .enter().append("td")
    .text(function(d) { return d3.select(this.parentNode).datum() + d; });

---

我让它与

each（）

方法一起工作。但我仍然想知道这是否是一种“正确”的方法，因为它看起来有点违反直觉。我使用

each（）

方法得到了它。但我还是想知道这样做是否“正确”，因为它看起来有点违反直觉。在第一个例子中，你所说的“对象”是什么意思？对象被用作标识函数的简写。构造函数在以下方面的行为与idfunc相同：idfunc=function（d）{return d；}在第一个示例中，“Object”是什么意思？Object用作identity函数的缩写。构造函数在以下方面的行为与idfunc相同：idfunc=function（d）{return d；}