如何在画笔"brush"事件处理程序中获取选定的基准面？

Question

我正试图使用链接到地图的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????
}

Answer 1

您需要进行某种迭代，以找出画笔范围内的点。D3不会自动为你做这件事，可能是因为它不知道你用什么形状来表示你的数据点。您对哪些内容被视为"已选择"，哪些内容未被视为是特定于应用程序的。

有几种方法可以做到这一点：

1. 正如您所建议的，您可以迭代您的数据。这样做的缺点是，您需要像创建<rect>元素时那样，再次从数据中导出形状信息。

2. 执行timeline.selectAll("rect")以获取您可能关心的所有元素，并使用selection.filter根据x、y、height和width属性对其进行精简。

3. 如果性能是一个问题，因为您有大量的节点，您可以使用四叉树辅助对象来划分曲面，并减少需要查看的点的数量以找到选定的点。

Answer 2

或者尝试Crossfilter，在那里你可以将画笔的范围传递给维度过滤器，然后你可以按照dimension.top（Infinity）.获取经过过滤和排序的数据

---

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