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