Обновление таблицы HTML в d3.Яш, используя многоразовые графике

У меня есть этот многоразовый шаблон для создания таблицы, вдохновленный http://bl.ocks.org/3687826 и у меня есть два вопроса по этому поводу.

Это функция: 

d3.table = function(config) {
var columns = [];

var tbl = function(selection) {
if (columns.length == 0) columns = d3.keys(selection.data()[0][0]);
console.log(columns)    

// Creating the table
var table = selection.append("table");
var thead = table.append("thead");
var tbody = table.append("tbody");

// appending the header row
var th = thead.selectAll("th")
        .data(columns)

th.enter().append("th");
    th.text(function(d) { return d });
th.exit().remove()

// creating a row for each object in the data
var rows = tbody.selectAll('tr')
    .data(function(d) { return d; })

rows.enter().append("tr");
rows.attr('data-row',function(d,i){return i});
rows.exit().remove();   

// creating a cell for each column in the rows
var cells = rows.selectAll("td")
        .data(function(row) {
    return columns.map(function(key) {
                return {key:key, value:row[key]};
    });
        })

cells.enter().append("td");
cells.text(function(d) { return d.value; })
    .attr('data-col',function(d,i){return i})
    .attr('data-key',function(d,i){return d.key});
cells.exit().remove();

return tbl;
};

tbl.columns = function(_) {
if (!arguments.length) return columns;
columns = _;
return this;
};

return tbl;
};

Эту таблицу можно назвать так: 

/// new table
var t = d3.table();

/// loading data
d3.csv('reusable.csv', function(error,data) {
    d3.select("body")
    .datum(data.filter(function(d){return d.price<850})) /// filter on lines
    .call(t)
});

Где многоразовые.csv-файл выглядит примерно так: 

date,price
Jan 2000,1394.46
Feb 2000,1366.42
Mar 2000,1498.58
Apr 2000,1452.43
May 2000,1420.6
Jun 2000,1454.6
Jul 2000,1430.83
Aug 2000,1517.68
Sep 2000,1436.51

И количество столбцов может быть обновлено на 

t.columns(["price"]); 
d3.select("body").call(t);

Проблема заключается в том, что при обновлении создается еще одна таблица с thead и tbody, так как создание таблицы является внутри функции.

Как я могу сказать "создать таблицу только один раз, а затем обновить"?

Другой вопрос: как я могу фильтровать строки, используя метод внутри функции?

1 3
html-table d3.js code-reuse

1 ответ:

Проблема заключается в следующих трех строках кода: 

// Creating the table
var table = selection.append("table");
var thead = table.append("thead");
var tbody = table.append("tbody");

, который всегда добавляет в документ новые элементы table, thead и tbody. Вот как вы можете сделать это условно, только когда эти элементы еще не существуют (пример, который вы приводите, создает свой div.элемент заголовка аналогично): 

selection.selectAll('table').data([0]).enter().append('table');
var table = selection.select('table');

table.selectAll('thead').data([0]).enter().append('thead');
var thead = table.select('thead');

table.selectAll('tbody').data([0]).enter().append('tbody');
var tbody = table.select('tbody');

Селекталл ().данные ([0]).входить().шаблон append() условно создает один элемент, если он не найден. В приведенном примере использовались данные ([true]), но любой массив с одним стихия подойдет.

Чтобы отфильтровать вложенные данные из функции, измените вызов на data() и передайте отфильтрованное подмножество данных выборки следующим образом: 

var rows = tbody.selectAll('tr').data(tbody.data()[0].filter(function(d) { 
    return d.price > 1400; 
}));

Удачи!

4