d3拖动行为：在拖动名称空间中注册，监听和触发不同类型？

Question

Typing d3.behavior.drag() has me confused. I'd like to specify drag types so that different objects trigger different drag events. I'm used to programming with D3 dispatches/namespaces doing the following:

1. registering them with the D3 dispatch object
2. then using something like .on('click.typeHere') to listen for the dispatch event
3. and using dispatch.typeHere(<<data>>) to trigger the event.

I can't figure out how the normal dispatch procedure applies to drag behavior. For example:

 var svg = d3.select('svg').append('g') .attr('transform','translate(0,20)'); svg.append('rect') .attr('height', 50) .attr('width', 20) .style('fill', 'steelblue'); var drag = d3.behavior.drag(); drag.on('drag', function() { console.log('drag'); }).on('drag.type', function() { console.log('namespace active'); }).on('drag.type2', function() { console.log('namespace2 active'); }); svg.append('circle') .attr('cx',20) .attr('cy',0) .attr('r',10) .style('fill', 'orange') .call(drag); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <svg></svg> 

I want the circle to trigger just drag.type when it is dragged and not the other drags that are registered in the drag behavior namespace. But .call(drag.type) isn't supported. What is the right way to go about this?

Answer 1

I would use different drag behaviours for the different types of objects with the respective drag handlers doing the appropriate thing. This will save you having to mess around with event namespaces:

var drag1 = d3.behavior.drag()
.on('drag', function() {
  console.log('drag rect');
});

svg.append('rect').call(drag1);

var drag = d3.behavior.drag()
.on('drag', function() {
  console.log('drag circle');
});

svg.append('circle').call(drag);

Complete demo here .