2014-02-14 3 views
3
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; }); 

Я не понимаю, что здесь представляет. Может ли кто-то так любезно пройти меня через код?Что такое .data (function (d) {return d;}) return in d3?

Ссылка: https://github.com/mbostock/d3/wiki/Selections#wiki-remove

+0

[Этот ответ должен объяснить использование функции в соединении данных] (http://stackoverflow.com/a/21760476/3128209). – AmeliaBR

+0

[И этот ответ должен объяснять использование функций как параметров в целом] (http://stackoverflow.com/a/21421101/3128209), в том числе о том, как он работает в '.text (function)' statement. – AmeliaBR

ответ

3

То, что вы здесь является nested selection, т.е. вы делаете выбор, а затем выбор на основе этого. Это также объяснение функции в аргументе .data() - оно вложено ниже первого, поэтому оно может ссылаться на него.

В частности, вы передаете массив массивов в .data(matrix). D3 будет делать что-то для каждого элемента этой матрицы, т. Е. Для каждого массива. Здесь он связан с добавленными элементами tr. Поэтому, когда вы снова вызываете .data(), вы можете обратиться к данным, привязанным к этим элементам (tr). function(d) { return d; } просто говорит, что D3 должен использовать уже привязанные к нему данные. Поскольку это массив, D3 будет делать что-то для каждого его элемента, то есть добавлять элементы ячейки таблицы.

Смежные вопросы