通过使用d3.js，可以非常方便地创建力场图(force layout graph)。在力场图的交互中，常会涉及到多种事件，例如：缩放，拖动，点击（单击、双击、右键）等。在有些情况下，事件之间会产生冲突。

注：文中所提的node指的是力场图中的节点。

1. zoom和drag

为图表添加缩放功能的代码如下：

var zoom = d3.behavior.zoom()
	.scaleExtent([0.5, 2])
	.on('zoom', function() {
		// ...
	});
svg.call(zoom);

允许力场图的node可拖动的代码如下：

nodes.call(force.drag);

在zoom和drag共存的情况下，拖动node时候，会触发zoom的拖动事件，从而导致node无法被拖动。此时的解决方法是：

force.drag()
	.on('dragstart', function(d) {
		d3.event.sourceEvent.stopPropagation();
		// ...
	});

2. zoom和dblclick

在添加了zoom的情况下，默认双击图像会方法。此时如果想要为node添加双击事件，需要禁止zoom的双击。代码如下：

svg.on('dblclick.zoom', null);

3. drag和click

如果对node同时监听了drag事件和click事件。那么当拖动的时候，会同时触发click事件。此时的解决方法是：

nodes.on('click', function(d) {
	if (d3.event.defaultPrevented) {
		return;
	}
	// ...
});

4. click与dblclick

如果对node同时添加了click与dblclick事件，那么在双击的时候会触发两次click事件。

可以在click事件的处理函数中，判断两次点击的时间差。如果小于某个值，则认为是双击事件，不做处理；否则是单击事件，正常处理。代码如下：

nodes.on('dblclick', function(d) {
		// process double click
		// ...
	})
	.on('click', function(d) {
		if (d._clickid) {
			clearTimeout(d._clickid);
			d._clickid = null;
		} else {
			d._clickid = setTimeout(function() {
				// process simple click
				// ...
				d._clickid = null;
			}.bind(this), 350);
		}
	});

也可以只监听click事件，在click事件的处理函数中，如果判断是双击，则执行双击的处理；否则执行单击的处理。例如：

nodes.on('click', function(d) {
	if (d._clickid) {
		clearTimeout(d._clickid);
		d._clickid = null;
		// process double click
		// ...
	} else {
		d._clickid = setTimeout(function() {
			// process simple click
			// ...
			d._clickid = null;
		}.bind(this), 350);
	}
});

这种情形便是典型的throttle function。