使用可重用的图表更新d3.js中的HTML表 [英] Updating an HTML table in d3.js using a reusable chart

问题描述

我有这种可重复使用的模式来创建表格，受到 http://bl.ocks.org/3687826 ，我有两个问题。

I have this reusable pattern to create a table, inspired by http://bl.ocks.org/3687826, and I have two questions about it.

这是函数：

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)
});

其中reusable.csv文件如下所示：

where the reusable.csv file is something like this:

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的表，因为创建表是在函数内。

The problem is that another table with thead and tbody is created while updating, because the creation of the table is inside the function.

我如何说一次只创建一次，然后更新？

另一个问题是：如何使用函数中的方法过滤线条？

Another question is: how can I filter the lines using a method inside the function?

推荐答案

问题出在这三行代码：

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

它总是将新的table，thead和tbody元素附加到文档。以下是有条件地执行此操作的方法，只有当这些元素不存在时（您引用它创建其div.header元素的示例类似）：

which always appends new table, thead, and tbody elements to your document. Here's how you can do this conditionally, only when these elements don't already exist (the example you cite creates its div.header element similarly):

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');

有条件地选择selectAll（）。data（[0]）。enter如果找不到，则创建单个元素。引用的例子使用data（[true]），但是任何数组都有一个元素。

The selectAll().data([0]).enter().append() pattern conditionally creates a single element if it isn't found. The cited example used data([true]) but any array with a single element will do.

要从函数中过滤嵌套数据，请更改对data（）的调用，并传递过滤的选择数据子集，如下所示：

To filter the nested data from within your function, change your call to data() and pass a filtered subset of the selection data like this:

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

祝你好运！

这篇关于使用可重用的图表更新d3.js中的HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！