D3.js & Hammer.js

Hummer.jsを使ってD3.jsで生成した要素にスワイプイベントなどを設置するサンプル。

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3.js & Hammer.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
html, body{
	overflow: hidden
	width: 100%;
	height:100%;
}
svg {
	width: 100%;
	height: 90%;
}

</style>

var links = [
	{ source : 0, target : 1 },
	{ source : 0, target : 2 },
	{ source : 1, target : 2 },
]

var svg = d3.select('svg');
var bodyElment =  document.querySelector("body")
var w = bodyElment.clientWidth;
var h = bodyElment.clientHeight;

// Force Layoutを設定
var force = d3.layout.force()
	.nodes(nodes)
	.links(links)
	.size([w, h])
	.gravity(0.1)
	.charge(-30)
	.friction(0.95)
	.linkDistance(220)
	.linkStrength(1);

//force レイアウトの計算を開始	
force.start(); 
 
 //線を引く
var line = svg.selectAll("line")
	.data(links)
	.enter()
	.append("line")
	.attr({
	"stroke": "black",
		"x1":function(d){ return d.source.x },
		"y1":function(d){ return d.source.y },
		"x2":function(d){ return d.target.x },
		"y2":function(d){ return d.target.y },
	});

//ノード用のグループを生成	
var nodeGroup = svg.selectAll("g")
	.data(nodes)
	.enter()
	.append('g')
	.attr('transform', function(d){ return 'translate('+[d.x, d.y]+')'})
  
  
 //ノード(円) 
nodeGroup.append("circle")
  .attr({
		"r":60,
		"fill": "black",
	})
	.each(function(d, i){
		addHummerEventListener(this, d);
	})
  .call(force.drag); ;

//ノード(ラベル)
nodeGroup.append('text')
	.attr({
		'y': 10,
		'fill': 'white',
		'text-anchor': 'middle',
		'font-size': 40,
	})
	.style('pointer-events', 'none')
	.text(function(d){ return d.lable }) 
 
//update
force.on("tick", function() {
	line
		.attr("x1", function(d) { return d.source.x; }) 
		.attr("y1", function(d) { return d.source.y; })
		.attr("x2", function(d) { return d.target.x; })
		.attr("y2", function(d) { return d.target.y; });
	nodeGroup
		.attr('transform', function(d){ return 'translate('+[d.x, d.y]+')'}) 
});

//Hummer.jsのイベントのリスナー
function addHummerEventListener(that, d){

Hammer(that).on("tap", function(event){
		console.log(event);
		alert("Tap! "+d.lable);
	});
	Hammer(that).on("swipeleft", function(event){
		console.log(event);
		alert("Swipe Left! "+d.lable);
	});
	Hammer(that).on("swiperight", function(event){
		console.log(event);
		alert("Swipe Right! "+d.lable);
	});
	
	
	//iphoneだとup,downがなぜか取得できない
	Hammer(that).on("swipeup", function(event){
		console.log(event);
		alert("Swipe UP! "+d.label);
	});
	Hammer(that).on("swipedown", function(event){
		console.log(event);
		alert("Swipe Down! "+d.label);
	});
}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js