En d3 para javascript, ¿cómo se crean diferentes elementos para sus datos?

Question

Por ejemplo, en un html <table>, un <tr> puede contener <th> y <td>. ¿Cómo vincularía los datos a una selección de fila que crearía columnas pares como <th> e impar como <td>?

Answer 1

Por lo tanto, este tampoco parece perfecto, pero siempre existe el método html().

​var d = [['a','b','c','d']]; 

var r = d3.select('#myTable').selectAll('tr') 
    .data(d); 

r.enter().append('tr').html(function(d) { 
    var i, s = ''; 
    for (i = 0; i < d.length; i += 1) { 
     s += (i%2===0) ? '<th>' : '<td>'; 
     s += d[i]; 
     s += (i%2===0) ? '</th>' : '</td>'; 
    } 
    return s; 
}​​​​​​​​​​​​​​​); 

Answer 2

Lo mejor que puedo llegar a está haciendo una mirada <td> como un <th> mediante la aplicación de una clase basada en el índice de los datos:

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

var tr = d3.select("#myTableRow").selectAll("td") 
    .data(d).enter().append("td") 
    .text(function(d) { return d; }) 
    .classed("thLike", function(d,i) { return i%2===0; }); 

CSS:

.thLike { 
    font-weight: bold; 
} 

Answer 3

Por lo que yo puedo decir, tiene usted razón - no hay manera de hacer esto en el lenguaje D3 estándar. Presumiblemente, esto será posible una vez que selection.append() pueda tomar una función:

selección. anexar (nombre )

añade un nuevo elemento con el nombre especificado ... El nombre se debe especificar como una constante, aunque en el futuro podríamos permitir anexar de elementos existentes o una función para generar el nombre dinamicamente.

Afortunadamente tal función tomaría los argumentos estándar (data, index), y resolvería este problema. De lo contrario, en este momento, no hay forma de que pueda crear diferentes elementos a partir de una sola selección .enter() - .enter() solo admite .append, .insert y .select, ninguno de los cuales puede tomar un argumento de función.

Usted puede obtener algo de lo que quiere por munging los datos en tuplas y de doble añadiendo a la selección .enter(), como se muestra aquí: http://jsfiddle.net/xuJ6w/4/

// munge data 
var tuples = data.map(function(row) { 
    var newRow = [], 
     x; 
    // create array of objects 
    for (x=0; x<row.length; x+=2) { 
     newRow.push({ 
      label: row[x], 
      value: row[x+1]    
     }) 
    } 
    return newRow; 
}); 

var rows = d3.select('table').selectAll('tr') 
    .data(tuples); 

rows.enter().append('tr'); 

var cellPairs = rows.selectAll('.cell') 
    .data(function(d) { return d; }); 

var entry = cellPairs.enter(); 
entry.append('th') 
    .attr('class', 'cell') 
    .text(function(d) { 
     return d.label; 
    }); 
entry.insert('td', 'th + th') 
    .attr('class', 'cell') 
    .text(function(d) { 
     return d.value; 
    }); 

Pero como se puede ver, cuando la actualización se llama :

cellPairs 
    .style('background', '#CCC'); 

Solo se actualizan los últimos nodos añadidos, por lo que los datos no se han enlazado por completo.

Answer 4

https://github.com/mbostock/d3/wiki/Selections#wiki-data

selectores también pueden ser intersección (".this.that" para lógica AND) o unioned (".Este, .que" para lógica OR).

Por lo tanto, algo como esto podría funcionar para usted. No he probado, aunque (si esta selección no funciona, puede simplemente añadir la misma clase para cada una de las células TD/TH y seleccione que con TR .myClass):

var cells = tableRow.selectAll("TD, TH").data(data); 
cells.enter().each(d, i) { 
    var cell = d3.select(this); 
    cell.append(i%2 ? "TD" : "TH"); 
})