Как можно сортировать таблицу HTML, созданную D3, без вызова «переход()»?

Question

Я пытаюсь понять, как можно сгенерировать HTML-таблицу D3 без явного использования перехода D3 «»() ».

Оригинальный код Mike Босток в сортируется таблица: http://bl.ocks.org/mbostock/3719724

Основная часть кода считывает данные из файла CSV, отображает его в разные имена заголовок столбца и визуализирует HTML таблицу:

d3.csv("readme-states-age.csv", function(states) { 
    var ages = d3.keys(states[0]).filter(function(key) { 
    return key != "State" && key != "Total"; 
    }); 

    d3.selectAll("thead td").data(ages).on("click", function(k) { 
    tr.sort(function(a, b) { return (b[k]/b.Total) - (a[k]/a.Total); }); 
    }); 

    var tr = d3.select("tbody").selectAll("tr") 
     .data(states) 
    .enter().append("tr"); 

    tr.append("th") 
     .text(function(d) { return d.State; }); 

    tr.selectAll("td") 
     .data(function(d) { return ages.map(function(k) { return d[k]/d.Total; }); }) 
    .enter().append("td").append("svg") 
     .attr("width", 71) 
     .attr("height", 12) 
    .append("rect") 
     .attr("height", 12) 
     .attr("width", function(d) { return d * 71; }); 
}); 

оказывается, что сортировка таблицы происходит с этим «по щелчку» обратного вызова:

d3.selectAll("thead td").data(ages).on("click", function(k) { 
    tr.sort(function(a, b) { return (b[k]/b.Total) - (a[k]/a.Total); }); 
    }); 

Я вижу "вид() ", вызывающая результирующий выбор записей данных (tr), но я не понимаю, как переход фактически применяется для обращения к таблице. Кажется, это происходит.

Может кто-нибудь объяснить, как и почему сортировка может быть достигнута без явного вызова d3.transition() функция?

Answer 1

Есть 50 штатов - ниже код создает 50 строк и связывает каждый из 50 строк до 50 строк по отдельности (Каждая строка содержит значение для значения для различного возрастного ведра)

var tr = d3.select("tbody").selectAll("tr") 
     .data(states) 
     .enter().append("tr"); 

Функция onclick передается в имени заголовка столбца (5-13,14-17, 18-24 ...) - функция сортировки возвращает значение в порядке убывания для щелчка по столбцу, который inturn сортирует все ряд.

d3.selectAll("thead td").data(ages).on("click", function(k) { 
    tr.sort(function(a, b) { return (b[k]/b.Total) - (a[k]/a.Total); }); 
    });