作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用链接到 map 的 d3.js 创建垂直时间轴,以便画笔中包含的任何项目也将显示在 map 中。有点像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 不会自动为您执行此操作,可能是因为它不知道您使用什么形状来表示数据点。关于什么被视为“已选择”而什么不是,您获得的详细程度完全取决于应用程序。
有几种方法可以解决这个问题:
按照您的建议,您可以迭代数据。这样做的缺点是您需要像创建 <rect>
时一样再次从数据中获取形状信息。元素。
做一个timeline.selectAll("rect")
获取您可能关心的所有元素并使用 selection.filter
根据 x
削减它, y
, height
和 width
属性。
如果因为您有大量节点而担心性能,您可以使用 Quadtree帮助划分表面并减少需要查看以找到所选点的点数。
关于d3.js - 如何在 brush "brush"事件处理程序中获取选定数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18115204/
我是一名优秀的程序员,十分优秀!