shimizu/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!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>

<body>
<svg></svg>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
<script>
var nodes = [
	{lable:"A"},
	{lable:"B"},
	{lable:"C"}
]

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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>

	<body>
	<svg></svg>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
	<script>
	var nodes = [
	{lable:"A"},
	{lable:"B"},
	{lable:"C"}
	]

	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>