2012-12-22 d3.js advent calendar 16日目 d3 javascript adventcalendar 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相応のものはありません。