Question

我有一个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一无所知，所以甚至不确定我究竟应该绑定或挂钩。

任何指针？

Answer 1

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

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

而是通过HTML标记或使用javascript预先创建表格。在更新功能之外创建它。说它是这样的：

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

现在您已设置好表格，我们可以使用＆＃39; D3.js方式更新它。的enter（），exit（）和update（）如下：

//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");

希望这有帮助。

Answer 2

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

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

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

2 个答案: