3
지도에 링크 된 d3.js를 사용하여 수직 타임 라인을 만들려고하여 브러시에 포함 된 모든 항목도지도에 표시됩니다. 종류는 http://code.google.com/p/timemap/과 비슷하지만 SIMILE 대신 d3을 사용하고 수평이 아닌 수직 타임 라인을 사용합니다.브러쉬 "브러시"이벤트 핸들러에서 선택된 데이텀을 어떻게 얻습니까?
시간 범위, 범례, 눈금 및 브러시를 나타내는 세로 막대가있는 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????
}