d3 数据更新 CSV - 无法弄清楚如何更新表格单元格答案

【问题标题】：d3 data update CSV - can't figure out how to update table cellsd3 数据更新 CSV - 无法弄清楚如何更新表格单元格
【发布时间】：2015-11-12 22:45:12
【问题描述】：

我有一个 haproxy 状态端点，它输出以下数据：

我想解析它的输出并构建一个漂亮的交互式仪表板（在这种情况下，监控哪些 Riak 节点在给定时间处于启动或关闭状态。

我写了以下内容：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>dadsa</title>
 </head>
 <body>
 <div id="viz"></div>
 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script>
 var hosts = [];
 var url = "http://localhost:8666/haproxy-csv";
 function update() {
     d3.csv(url, function(data) {
     hosts = data.filter(
             function(d){
                 console.log(JSON.stringify(  d) );
                 console.log(Object.keys(d));
                 console.log(d["# pxname"]);
                 return d["# pxname"] == "riak_backend_http"
                         && d["svname"] != "BACKEND";
             }
     ).map(function(d){
         return {"label": d["svname"],"value": d["status"]};
     });
     d3.select("#viz")
             .append("table")
             .style("border-collapse", "collapse")
             .style("border", "2px black solid")
             .selectAll("tr")
             .data(hosts)
             .enter().append("tr")
             .selectAll("td")
             .data(function(d){
                 return [
                     d["label"], d["value"]
                 ];
             })
             .enter().append("td")
             .style("border", "1px black solid")
             .style("padding", "5px")
             .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
             .on("mouseout", function(){d3.select(this).style("background-color", "white")})
             .text(function(d){return d;})
             .style("font-size", "12px");
 });
 }
 update();
 setInterval(update, 1000);
 </script>
 <button onclick="alert(JSON.stringify(hosts[0]))"> see value </button>
 <div id="svg"/>
 </body>
 </html>

该代码运行良好，但有一个小缺陷。它在每次更新时不断地附加一个新的表格元素。我已经多次重写了这段代码，但我写的似乎只是更新了一次。

这是当前输出的样子：

我对 d3 真的一无所知，所以我什至不确定我到底应该绑定或挂钩什么。

任何指针？

【问题讨论】：

标签： d3.js html-table insert-update import-from-csv

【解决方案1】：

每次更新都会得到一个新表，因为每次在更新函数中执行此操作时实际上都是在附加一个新表。

...
d3.select("#viz")
   .append("table")
...

改为通过 HTML 标记或使用 javascript 预先创建您的表格。在更新函数之外创建它。说它是这样的：

var myTable = d3.select("#viz")
               .append("table")
               .style("border-collapse", "collapse")
               .style("border", "2px black solid");

现在您已经设置好表，我们可以使用 enter()、exit() 和 update() 的“D3.js 方式”更新它，如下所示：

//bind the data to rows
var rows = myTable.selectAll("tr").data(hosts); 
//append as needed using enter()
rows.enter().append("tr");
//remove placeholders in exit
rows.exit().remove(); 

//bind the data to columns in each row
var columns = myTable.selectAll("tr")
                     .selectAll("td")
                     .data(function(d){
                       return [
                         d["label"], d["value"]
                       ];
                     });

//enter and exit as above
columns.enter().append("td");
columns.exit().remove();

//finally update the columns
myTable.selectAll("td")
         .style("border", "1px black solid")
         .style("padding", "5px")
         .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
         .on("mouseout", function(){d3.select(this).style("background-color", "white")})
         .text(function(d){return d;})
         .style("font-size", "12px");

希望这会有所帮助。

【讨论】：

谢谢你，帮助很大。我暂时对范围行为感到困惑（来自几年的 Erlang/Functional 编程）。

【解决方案2】：

为什么不在每次更新时删除表格元素。添加这一行

d3.csv(url, function(data) {
   d3.select("#viz").select("table").remove();//removes the table
   //other code as usual

【讨论】：