使用 d3.js 从画笔选择中返回表格数据答案

【问题标题】：return tabulate data from brush selection with d3.js使用 d3.js 从画笔选择中返回表格数据
【发布时间】：2013-10-19 08:17:42
【问题描述】：

我将 MBostock 设计的散点图矩阵（参见 here）改编为我的数据，正如您在这个工作小提琴中看到的那样：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，并开始创建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()检索到的数据传递给tabulate()，但这很愚蠢，因为每次移动鼠标时，所有行都会添加到旧行，所以我需要删除重绘前的上一张表...

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：

我发布了一个选择示例：

【问题讨论】：

你见过this example吗？
是的，这段代码主要基于这个例子:)
好的，你想做什么，但不在这个例子中？是否要确定选择覆盖了哪些轴线？
是的，我不知道如何检索与画笔选择相对应的行并以表格方式显示（在我的问题中为粗体）为了清楚起见，我用原始示例更新了我的问题。
您需要做的就是使用scale.ticks() 获取刻度线的位置（即轴线），然后过滤那些不在您选择范围内的位置。

标签： javascript json d3.js scatter-plot brush

【解决方案1】：

我做了一个基于 R/Shiny 的应用程序，在用户画笔和表格显示之间有一个（单向）lnik。 Get the code here

这就是想法：

function brushend() {
  if (brush.empty()){
    svg.selectAll(".greyed").classed("greyed", false);
  }
  var circleStates = d3.select('svg')
                    .select('g.cell')
                    .selectAll('circle'[0])
                    .map(function(d) {return d.className['baseVal']});
  Shiny.onInputChange("mydata", circleStates);
}

circleStates 然后被转换为 TRUE/FALSE 向量，并用作数据帧过滤向量。

dfFilter <- input$mydata
displayDF <- baseData$df #data sent to d3.js
dfFilter[dfFilter==''] <- TRUE
dfFilter[dfFilter=='greyed'] <- FALSE
return(displayDF[dfFilter == TRUE,, drop=FALSE])

【讨论】：

【解决方案2】：

你可以使用类似于circle的测试来判断行是否在选择框内：

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][3] > d[p.y] || d[p.y] > e[1][4];
    });

    var line = svg.selectAll("line").classed("selected-line", function(d) {
      // perform line test here
    })

    var selected_lines = svg.selectAll(".selected-line");

    //tabulate(tab,["gpcr", "greduc-contagion","gtheta1","gtheta2","medNumberPeopleInfected", "medOutTrafficReduction"]) ;

}

【讨论】：