D3.js belgeleri ile okuyorum, ve zor olan belgeler the selection.data method anlamak için bulma yaşıyorum.

Bu örnek kodu belgelerinde verilmektedir

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d) { return d; })
  .enter().append("td")
    .text(function(d) { return d; });

Bu en anlıyorum, ama ne var td deyim .data(function(d) { return d; }) bölümüne mi dönüyor?

En iyi tahminim şu şekildedir:

• var tr tr deyim her düğüm için dört öğeli bir dizi ilişkili
• var td ifadesinin ardından dört element, veri olarak, bir şekilde dizi kullanır

Ama nasıl .data(function(d) { return d; }) aslında bu veri, ve geri nedir?

Yazarken:

….data(someArray).enter().append('foo');

D3 dizisi <foo> elemanları, her giriş için bir grup oluşturur. Daha da önemlisi, aynı zamanda __data__ bir özellik olarak DOM element ile dizideki her giriş için veri ortakları.

Bunu deneyin:

var data = [ {msg:"Hello",cats:42}, {msg:"World",cats:17} ]; 
d3.select("body").selectAll("q").data(data).enter().append("q");
console.log( document.querySelector('q').__data__ );

(Konsol) nesne ilk ile ilişkili olduğundan 15**, göreceksiniz ne q element yarattı.

Sonra yapın:

d3.selectAll('q').data(function(d){
  // stuff
});

d değerini __data__ Bu özellik olduğu ortaya çıkıyor. (Kodu // stuff yerine emin olmak için bu noktada bu değerler yeni bir dizi döndürür.)

Here's another example verileri HTML öğesi bağlı ve alt öğeleri yeniden bağlama veri alt kümeleri yeteneğini gösteren: