Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/index.html

Last active January 15, 2018 08:09
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 EfratVil/be76021f1244e1a48130ff481b0d3129 to your computer and use it in GitHub Desktop.
Save EfratVil/be76021f1244e1a48130ff481b0d3129 to your computer and use it in GitHub Desktop.
Download ZIP
Transition Options
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<div style="margin-left: 50px; margin-top: 20px;">
<button id="btn1" type="button" class="btn btn-info btn-sm">Transition - Sequential</button>
<button id="btn2" type="button" class="btn btn-info btn-sm">Transition - Together</button>
&nbsp; &nbsp; &nbsp;
<button id="btn3" type="button" class="btn btn-info btn-sm">Change Color</button>
<button id="btn4" type="button" class="btn btn-info btn-sm">Change Color - Loop</button>
</div><br /><br />
<p id="c1"></p><br/>
<p id="c2"></p><br />
<script>
var width = 800,
height = 150;
var svg = d3.select("#c1").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("circle")
.attr("cx",150)
.attr("cy", 75)
.attr("r", 60)
.attr('id', "c1")
.attr("class", "circ")
.style("opacity", 1.0)
.style("fill", "#f46d43");
var svg1 = d3.select("#c2").append("svg")
.attr("width", width)
.attr("height", height);
svg1.append("circle")
.attr("cx", 150)
.attr("cy", 75)
.attr("r", 60)
.attr('id', "c2")
.attr("class", "circ")
.style("opacity", 1.0)
.style("fill", "#f46d43");
var pos = 1;
d3.select("#btn1").on("click", function () {
var t = svg.transition().duration(750);
if (pos == 1)
{
svg.select("#c1").transition(t).attr("cx", 600);
svg1.select("#c2").transition(t).attr("cx", 600);
pos = 2;
}
else
{
svg.select("#c1").transition(t).attr("cx", 150);
svg1.select("#c2").transition(t).attr("cx", 150);
pos = 1;
}
});
d3.select("#btn2").on("click", function () {
if (pos == 1) {
d3.selectAll("circle").transition()
.delay(350)
.on("start", function repeat() {
d3.active(this)
.attr("cx", 600);
});
pos = 2;
}
else
{
d3.selectAll("circle").transition()
.delay(350)
.on("start", function repeat() {
d3.active(this)
.attr("cx", 150);
});
pos = 1;
}
});
d3.select("#btn3").on("click", function () {
d3.selectAll("circle").transition()
.delay(350)
.on("start", function repeat() {
d3.active(this)
.style("fill", "#68A8AD")
.transition()
.delay(350)
.style("fill", "#96CEB4")
.transition()
.delay(350)
.style("fill", "#737495");
});
});
d3.select("#btn4").on("click", function () {
d3.selectAll("circle").transition()
.delay(350)
.on("start", function repeat() {
d3.active(this)
.style("fill", "#68A8AD")
.transition()
.delay(350)
.style("fill", "#96CEB4")
.transition()
.delay(350)
.style("fill", "#737495")
.transition()
.delay(350)
.on("start", repeat);
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment