如何使用 d3 创建键值对的动态表答案

【问题标题】：How to create dynamic table of key-value pairs with d3如何使用 d3 创建键值对的动态表
【发布时间】：2013-03-29 21:36:12
【问题描述】：

我想使用 d3 为可选数据点动态生成键值对表。

例如，对于下面粘贴的 data.csv 文件，我有 d3 代码，它将 4 个数据点的 x、y 值绘制为 svg 中的圆圈。我希望能够在单击每个圆圈时生成一个键值对表。因此，对于 point1（第 1 行），表格将是：

<table>
<thead>
<tr> <th>Key</th>  <th>Value</th>  </tr>
</thead>
<tbody>
<tr> <td>name</td> <td>point1</td> </tr>
<tr> <td>x</td>    <td>50</td>     </tr>
<tr> <td>y</td>    <td>200</td>    </tr>
<tr> <td>f</td>    <td>1</td>      </tr>
</tbody>
</table>

此表将根据所选数据点进行更新 - 请注意标题保持不变，但表的内容应更改。到目前为止的示例数据和我的 d3 + html 代码如下。非常感谢任何帮助。

data.csv

name,x,y,f
point1,50,170,1
point2,100,75,2
point3,150,125,3
point4,35,25,4

example.js

var svg = d3.select("body")
   .append("svg")
   .attr("width", 400)
   .attr("height", 200);

var mktable = function(dat) {
   console.log(dat)  // data is available!

   var tr = d3.select("tbody").selectAll("tr")
      .data(d3.keys(dat)).enter().append("tr")  

   var td = tr.selectAll("td")
      .data(function(d){return d})
      .enter().append("td")
      .text(function(d) {return d})
};

d3.text("data.csv", function(text) {
   var data = d3.csv.parse(text);

   svg.selectAll("circle")
      .data(data)
      .enter()
      .append("svg:circle")
      .attr("cx", function(d) {
         return parseFloat(d.x);
      })
      .attr("cy", function(d) {
         return parseFloat(d.y);
      })
      .attr("r", function(d) {
         return 3;
      })
      .on("mouseover", function() {
         d3.select(this)
            .attr("r", function(d) { return 7 });
      })
      .on("mouseout", function() {
         d3.select(this)
            .attr("r", function(d) { return 3 });
      })
      .on("click", mktable)
});

example.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
   <script type="text/javascript" src="example.js"></script>
<table>
   <thead>
      <tr><th>Key</th><th>Value</th></tr>
   </thead>
   <tbody>
   </tbody>
</table>
 </body>
</html>

【问题讨论】：

标签： html csv d3.js html-table

【解决方案1】：

进度 - 此 mktable 函数会为第一次点击生成正确的表格，但点击第二个点会添加额外 td 元素，而不是替换它们。

var mktable = function(dat, i) {
    var tr = d3.select("tbody").selectAll("tr")
        .data(d3.entries(dat));

     tr.enter().append("tr");

    tr.append("td")
        .text(function(d) { return d.key });

    tr.append("td")
        .text(function(d) { return d.value });

    tr.exit().remove();
 };

【讨论】：

【解决方案2】：

当您编写属性时，您还可以读取它们，处理点击事件。因此，您可以读取在矢量circle 元素中设置的任何属性，并使用它们来生成表格。

如果您需要额外的值，可以将它们保存在圆圈中的data- 属性中，例如data-name。 data- 属性以这种方式构造以符合 w3c 规范。

在您的情况下，我认为表格对齐很难以简单的方式实现，因为表格是 HTML 元素，不能附加到 SVG 元素。您可能可以用z-index 覆盖表格，但我建议您使用其他技术来显示该值，例如设置title 或附加和SVG 元素。

【讨论】：