javascript - d3.js: nested selection with two one dimensional arrays -

javascript - d3.js: nested selection with two one dimensional arrays -

i want create table 2 1 dimensional arrays d3.

let's assume input arrays are:

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

i want table this

ad ae af bd bf cd ce cf

should utilize nested selection? or should utilize 1 phone call selectall().data(), followed phone call each()? (in real life, operation each matrix cell won't simple 'a'+'d', don't think should matter answer.)

one approach create new 2d array 2 arrays create suitable standard nested selection pattern (see: http://bost.ocks.org/mike/nest/):

var arr1 = ['a', 'b', 'c'], arr2 = ['d', 'e', 'f']; // prepare 2d array var info = arr1.map(function(v1) { homecoming arr2.map(function(v2) { homecoming v1 + v2; }) }); d3.select("body").append("table") .selectall("tr") .data(data) .enter().append("tr") .selectall("td") .data(object) .enter().append("td") .text(string);

another approach create utilize of fact functions beingness passed not index of element within group, index j of grouping belongs to:

var arr1 = ['a', 'b', 'c'], arr2 = ['d', 'e', 'f']; d3.select("body").append("table") .selectall("tr") // arr1 corresponds rows // bound info not used in td cells; arr1.length used .data(arr1) .enter().append("tr") .selectall("td") // arr2 corresponds columns .data(arr2) .enter().append("td") .text(function(d, i, j) { homecoming arr1[j] + d; }); // d === arr2[i]

a similar approach grabs bound info grouping using parentnode instead of index j:

var arr1 = ['a', 'b', 'c'], arr2 = ['d', 'e', 'f']; d3.select("body").append("table") .selectall("tr") // arr1 corresponds rows .data(arr1) .enter().append("tr") .selectall("td") // arr2 corresponds columns .data(arr2) .enter().append("td") .text(function(d) { homecoming d3.select(this.parentnode).datum() + d; });

javascript d3.js