Built with blockbuilder.org
forked from enjalot's block: merging selections
license: mit |
Built with blockbuilder.org
forked from enjalot's block: merging selections
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see in this editor! | |
var svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500) | |
var dataEarly = [ | |
{ ldap: "enjalot", x: 0 }, | |
{ ldap: "siumei", x: 1}, | |
{ ldap: "ramesh", x: 2} | |
] | |
var dataLate = [ | |
{ ldap: "sami", x: 3}, | |
{ ldap: "logan", x: 4}, | |
{ ldap: "siumei", x: 5}, | |
{ ldap: "phillip", x: 6}, | |
{ ldap: "kristen", x: 7}, | |
{ ldap: "adelaide", x: 8} | |
] | |
svg.selectAll("circle") | |
.data(dataEarly, function(d) { | |
return d.ldap | |
}) | |
.enter() | |
.append("circle") | |
.attr("r", 30) | |
.attr("cx", function(d,i) { | |
return 50 + d.x * 80 | |
}) | |
.attr("cy", 100) | |
.attr("fill", "#eda39a") | |
.on("mouseover", function(d,i) { | |
console.log(i,d) | |
}) | |
console.log("get ready") | |
setTimeout(function() { | |
//console.log("hiiii") | |
var circles = svg.selectAll("circle") | |
.data(dataLate, function(d) { | |
return d.ldap | |
}) | |
var enteredCircles = circles.enter() | |
.append("circle") | |
.attr("r", 30) | |
.attr("cy", 100) | |
.attr("cx", function(d,i) { | |
return 50 + d.x * 80 | |
}) | |
.style("opacity", 0) | |
enteredCircles.merge(circles) | |
.on("mouseover", function(d,i) { | |
console.log(i,d) | |
}) | |
.transition().duration(2000) | |
.attr("cx", function(d,i) { | |
return 50 + d.x * 80 | |
}) | |
.attr("fill", "#9bedd4") | |
.attr("stroke", "#111") | |
.style("opacity", 1) | |
}, 1000) | |
</script> | |
</body> |