Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active August 29, 2015 14:27
Show Gist options
  • Save shimizu/62b5c8ed888c8a1d2c16 to your computer and use it in GitHub Desktop.
Save shimizu/62b5c8ed888c8a1d2c16 to your computer and use it in GitHub Desktop.
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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment