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不会自动为您执行此操作，可能是因为它无法知道您用于表示数据点的形状。您对“被选中”的内容以及未被选中的内容的详细程度非常详细。

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

如您所知，您可以迭代您的数据。这样做的缺点是，您需要再次以与创建<rect>元素时相同的方式从数据中获取形状信息。
执行timeline.selectAll("rect")抓取您可能关注的所有元素，并使用selection.filter根据x，y，{{1}将其削减}}和height属性。
如果由于节点数量非常大而导致性能受到影响，您可以使用Quadtree帮助器对曲面进行分区，并减少需要查看的点数以查找选定的。

Answer 2

或者尝试Crossfilter，您可以将范围从画笔传递到维度过滤器，然后按dimension.top(Infinity)获取已过滤和排序的数据。

（有点迟到的答案，购买也可能对其他人有用。）

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

2 个答案: