我将 MBostock 设计的散点图矩阵(见这里)改编为我的数据,正如你在这个工作小提琴中看到的那样:http: //jsfiddle.net/UYqmP/
正如你在这段代码中看到的,我的数据有这个 json 格式:
var d = ' [{"gtheta1":0.9747193937107533,"greduc-contagion":0.3775906327152618,"gtheta2":0.9377611038894604,"medOutTrafficReduction":3.0805087784299356,"medNumberPeopleInfected":99.87409839935529,"gpcr":1.0}]'
这个 json 取我原始 csv 的行:[{line1},{line2},etc.]
使用 d3.js 进行画笔选择允许我们以图形方式选择值的子集,所以我的问题很简单,如何检索与用户选择的圆圈相对应的线条,以及如何将其显示到图形下的动态表格中?
我创建了div
for 表,并开始创建一个tabularfunction()
,但我不知道如何将数据检索回选定的圆圈(在 d3 参数中找不到好的指针),以及如何调用它tabularFunction()
tabulate(tab,["gpcr", "greduc-contagion","gtheta1","gtheta2","medNumberPeopleInfected", "medOutTrafficReduction"]) ;
function tabulate(data, columns) {
//Retrieve selected lines from list of circle given by D3 ?
var table = d3.select("#table").append("table").attr("style", "margin-left: 50px"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(data)
.enter()
.append("td")
.text(function(d) { return d.value; });
return table;
}
对于此函数的调用,我首先尝试将检索到的数据传递给brushmove()
intotabulate()
但这很愚蠢,因为在鼠标的每次移动时,所有行都会添加到旧行,所以我需要在重绘之前删除前一个表......
function brushmove(p) {
var e = brush.extent();
var tab = svg.selectAll("circle").classed("hidden", function(d) {
return e[0][0] > d[p.x] || d[p.x] > e[1][0]
|| e[0][4] > d[p.y] || d[p.y] > e[1][5];
});
//tabulate(tab,["gpcr", "greduc-contagion","gtheta1","gtheta2","medNumberPeopleInfected", "medOutTrafficReduction"]) ;
}
更新 1:
我发布了一个选择示例: