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="//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>