我想使用d3动态生成一个可选择数据点的键值对表。
例如,对于下面粘贴的data.csv文件,我有d3代码,将在svg中将4个数据点的x,y值绘制为圆圈。我希望能够生成键值对表时,每个圆圈被单击。因此,对于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>
Progress—这个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();
};
在编写属性时,还可以读取它们,处理单击事件。因此,您可以读取在矢量circle
元素中设置的任何属性,并使用它们来生成表。
如果您需要额外的值,您可以将它们保存在圆圈中的data-
属性中,例如data-name
。为了符合w3c规范,data-
属性的结构是这样的。
在你的情况下,我认为表对齐将很难以一种简单的方式实现,因为表是一个HTML元素,它不能追加到SVG元素。您可能可以用z-index
覆盖表格,但我建议您使用其他技术来显示值,例如设置title
或附加SVG元素。