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????
}
4

2 に答える 2

1

または、 Crossfilterを試してください。そこで、ブラシからディメンション フィルターにエクステントを渡し、次に、フィルター処理および並べ替えられたデータをdimension.top(Infinity)でフェッチします。

（少し遅い回答です。購入すると、他の人にも役立つかもしれません。）

于 2014-12-08T09:28:32.740 に答える