d3.js advent calendar 16日目

d3 advent calendar 16日目
d3.behavior.drag

dragとは

せっかくのHTMLですし、ドリルダウンで詳細にデータを深掘りしたいですよね。そのインタラクションとしてd3で用意されている一つがd3.behavior.dragです

使い方

基本的には、選択された要素に対して.call()で実施します。.drag()はeventとして下記をとり、それぞれにhandlerをセットすることで容易にdragというインタラクションを実装することができます

  • dragstart
  • drag
  • dragend

まずはコード例方

var circle = d3.select('hody').append('svg').selectAll('circle').data(d3.range(100)).enter()
.append('circle').attr('r', 10).attr('fill', 'red')
.attr('cx', function(){return 0|Math.random() * 100}).attr('cy', function(){return 0|Math.random()* 100});
var dragmove = function(d){ d3.select(this)
.attr('cx', d3.event.x).attr('cy', d3.event.y);};
var drag = d3.behavior.drag().on('drag', dragmove);

handler

handlerは他のsetter同様、引数にデータを取ります。また、thisにはイベントが発生したsvgの要素が入ります
このため、d3.select(this)とすることで、属性やスタイルの変更を行うことが可能です
イベントオブジェクトは、d3.eventに格納されています
頻繁に使うことになるものは下記の値だと思います

  • d3.event.sourceEvent.x / clientX / laytoutX / offsetX / pageX / screenX
  • d3.event.sourceEvent.y / clientY / laytoutY / offsetY / pageY / screenY
  • d3.event.sourceEvent.dx
  • d3.event.sourceEvent.dy

handlerサンプル

var dragHandler = function(d){
d3.select(this).attr('cx', d3.event.x);
}

dropが無い!

どなたか知っている方がいらっしゃったら教えて欲しいのですが
jquery-uiのdroppable相応のものはありません。