Skip to content

Instantly share code, notes, and snippets.

@vicapow

vicapow/index.html

Created February 18, 2014 22:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vicapow/9081253 to your computer and use it in GitHub Desktop.
Save vicapow/9081253 to your computer and use it in GitHub Desktop.
Download ZIP
understanding mouse events
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
body, html{
width: 100%;
height: 100%;
margin: 0;
}
svg{
}
circle{
stroke: #333;
fill: #666;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = window.innerWidth, height = window.innerHeight
var svg = d3.select('body').append('svg')
.attr({width: width, height: height})
var root = svg.append('g')
.attr('transform', 'translate(' + [width/2, height/2] + ')')
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
.on('mouseover', function(){
console.log("mouse over")
d3.select(this).select('g').style('opacity', 1)
})
.on('mouseleave', function(){
console.log("mouse leave")
d3.select(this).select('g').style('opacity', 0)
})
.append('g')
.attr('transform', 'translate(' + [20, 20] + ')')
.style('opacity', 0)
.call(function(g){ g.append('circle').attr('r', 50) })
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment