搜索在d3.js中用d3.csv函数生成的html表

时间:2018-12-06 10:16:35

标签: javascript d3.js

我想在使用d3.js中的d3.csv函数生成的表上具有简单的搜索功能。

当d3.csv传递给它时,这是呈现html表的脚本:

<script>
    function tabulate(data, columns) {
        var table = d3.select("#table").append("table"),
        caption = table.append("caption");
        caption.append("caption").append("table").text("XYZ")
        thead = table.append("thead"),
        tbody = table.append("tbody");

        thead.append("tr")
            .selectAll("th")
            .data(columns)
            .enter()
            .append("th")
                .text(function(column) { return column; });

        d3.csv("data.csv", function(error, data) {
            if (error) throw error;
                var tr = tbody.selectAll("tr")
                .data(data)
                .enter().append("tr")
                tr.each(function(d) {
                var self = d3.select(this);
                self.append("td")
                .html(d["A1"]);

        if (d.A2 == "SUCCESS")
            {
            self.append("td")
            .style("background-color", '#66cc00')
            .append("a")
            .text(d.A2);
            }
        else {
            self.append("td")
            .style("background-color", '#ff3333')
            .append("a")
            .text(d.A2);
            }

        });
    });
    return table;
    }
    var Table = tabulate(d3.csv, ["H1", "H2"],);
</script>

我现在需要的是根据此命令在此表上进行简单搜索:http://jsfiddle.net/gnx917r8/

我无法将此表条目链接到搜索功能。

请帮助。

0 个答案:

没有答案