如何在画笔“画笔”事件处理程序中获取选定的基准？答案

【问题标题】：How do you get selected datums in brush "brush" event handler?如何在画笔“画笔”事件处理程序中获取选定的基准？
【发布时间】：2023-03-24 02:16:01
【问题描述】：

我正在尝试使用链接到地图的 d3.js 创建垂直时间线，以便画笔中包含的任何项目也将显示在地图中。有点像http://code.google.com/p/timemap/，但使用 d3 代替 SIMILE，使用垂直时间线而不是水平时间线。

我可以成功地创建一个带有表示时间范围、图例、刻度和画笔的垂直条的 svg。处理画笔事件的函数被调用，我可以获得包含画笔 y 轴开始和停止的范围。到目前为止一切顺利...

如何获得画笔覆盖的基准？我可以遍历我的初始数据集以查找范围范围内的项目，但这感觉很糟糕。是否有一种 d3 特定的方法可以通过画笔突出显示基准？

var data = [
  {
     start: 1375840800,
     stop: 1375844400,
     lat: 0.0,
     lon: 0.0
  }
];
var min = 1375833600; //Aug 7th 00:00:00
var max = 1375919999; //Aug 7th 23:59:59
var yScale = d3.time.scale.utc().domain([min, max]).range([0, height])
var brush = d3.svg.brush().y(yScale).on("brush", brushmove);

var timeline = d3.select("#myDivId").append("svg").attr("width", width).attr("height", height);

timeline.selectAll("rect")
  .data(data)
  .enter().append("rect")
    .attr("x", function(datum, index) {return index * barSize})
    .attr("y", function(datum, index) {return yScale(datum.start)})
    .attr("height", function(datum, index) {return yScale(datum.end) - yScale(datum.start)})
    .attr("width", function() {return barSize})

timeline.append("g")
  .attr("class", "brush")
  .call(brush)
    .selectAll("rect")
    .attr("width", width);

function brushmove() {
  var extent = brush.extent();
  //How do I get the datums contained inside the extent????
}

【问题讨论】：

标签： d3.js timeline brush

【解决方案1】：

您需要进行某种迭代来确定哪些点位于画笔范围内。 D3 不会自动为您执行此操作，可能是因为它不知道您使用什么形状来表示数据点。您对什么被认为是“选定”和什么不是“选定”的了解的详细程度完全取决于应用程序。

有几种方法可以解决这个问题：

按照您的建议，您可以迭代数据。这样做的缺点是您需要再次从数据中获取形状信息，就像创建 <rect> 元素时所做的那样。
使用timeline.selectAll("rect") 来获取您可能关心的所有元素，并使用selection.filter 根据x、y、height 和width 属性将其削减。
如果因为您有大量节点而需要考虑性能，您可以使用 Quadtree 帮助器对表面进行分区并减少需要查看的点数以找到选定的点.

【讨论】：

【解决方案2】：

或者试试Crossfilter，在那里你将画笔中的范围传递给维度过滤器，然后你通过dimension.top(Infinity)获取过滤和排序的数据。

（回答有点晚，购买可能对其他人也有用。）

【讨论】：