Skip to content

Instantly share code, notes, and snippets.

@EfratVil EfratVil/README.md

Last active Sep 16, 2017
Embed
What would you like to do?
Objects ordering

Hover on object to bring it to the front, click to take object to the background.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 100;
var circles = d3.range(40).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range([ '#0D6F7F','#E07351', '#169E87', '#5D8222', '#97AF22', '#D2A825', '#DB5A33', '#DC5F5F', '#D86A87', '#CCCAC8']);
var firstChild;
svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", radius)
.style("fill", function (d, i) { return color(i); })
.on("mouseover", function (d) {
this.parentElement.appendChild(this);
})
.on("click", function (d) {
firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.