Add group <-> stack bidrectional animation.
This commit is contained in:
Родитель
b667421e51
Коммит
bca36356ec
|
@ -29,19 +29,40 @@ button {
|
||||||
padding: 6px 10px 6px 10px;
|
padding: 6px 10px 6px 10px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid #222;
|
border-bottom: 1px solid #222;
|
||||||
|
margin: 0 0 0 2px;
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 5px;
|
||||||
-moz-box-shadow: 0 1px 3px #999;
|
-moz-box-shadow: 0 1px 3px #999;
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 5px;
|
||||||
-webkit-box-shadow: 0 1px 3px #999;
|
-webkit-box-shadow: 0 1px 3px #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.first {
|
||||||
|
-webkit-border-top-right-radius: 0;
|
||||||
|
-webkit-border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.last {
|
||||||
|
-webkit-border-top-left-radius: 0;
|
||||||
|
-webkit-border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.active {
|
||||||
|
background-color: rgb(65,102,133);
|
||||||
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #555;
|
background-color: steelblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<button id="group" class="first" onclick="group.apply()">
|
||||||
|
Group
|
||||||
|
</button
|
||||||
|
><button id="stack" class="active last" onclick="stack.apply()">
|
||||||
|
Stack
|
||||||
|
</button><br>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
var n = 4, // number of layers
|
var n = 4, // number of layers
|
||||||
|
@ -67,7 +88,8 @@ var layers = vis.selectAll("g.layer")
|
||||||
.data(data)
|
.data(data)
|
||||||
.enter.add("svg:g")
|
.enter.add("svg:g")
|
||||||
.attr("fill", function(d) { return color(this.index / (n - 1)); })
|
.attr("fill", function(d) { return color(this.index / (n - 1)); })
|
||||||
.attr("class", "layer");
|
.attr("class", "layer")
|
||||||
|
.attr("transform", "translate(0,0)"); // for animation
|
||||||
|
|
||||||
var bars = layers.selectAll("g.bar")
|
var bars = layers.selectAll("g.bar")
|
||||||
.data(function(d) { return d; })
|
.data(function(d) { return d; })
|
||||||
|
@ -84,16 +106,6 @@ bars.add("svg:rect")
|
||||||
.tweenAttr("y", y1)
|
.tweenAttr("y", y1)
|
||||||
.tweenAttr("height", function(d) { return y0(d) - y1(d); });
|
.tweenAttr("height", function(d) { return y0(d) - y1(d); });
|
||||||
|
|
||||||
// bars.filter(function(d) { return y0(d) - y1(d) > 12; })
|
|
||||||
// .add("svg:text")
|
|
||||||
// .attr("x", x({x: .45}))
|
|
||||||
// .attr("y", function(d) { return y1(d) + 6; })
|
|
||||||
// .attr("dx", 0)
|
|
||||||
// .attr("dy", ".71em")
|
|
||||||
// .attr("fill", "white")
|
|
||||||
// .attr("text-anchor", "middle")
|
|
||||||
// .text(function(d) { return d.y.toFixed(2); });
|
|
||||||
|
|
||||||
var labels = vis.selectAll("text.label")
|
var labels = vis.selectAll("text.label")
|
||||||
.data(data[0])
|
.data(data[0])
|
||||||
.enter.add("svg:text")
|
.enter.add("svg:text")
|
||||||
|
@ -113,15 +125,23 @@ vis.add("svg:line")
|
||||||
|
|
||||||
vis.apply();
|
vis.apply();
|
||||||
|
|
||||||
var t = d3.selectAll("g.layer")
|
var group = d3.selectAll("body");
|
||||||
.data(data)
|
|
||||||
.attr("transform", "translate(0,0)");
|
|
||||||
|
|
||||||
t.transition()
|
group.select("#group")
|
||||||
|
.attr("class", "first active");
|
||||||
|
|
||||||
|
group.select("#stack")
|
||||||
|
.attr("class", "last");
|
||||||
|
|
||||||
|
group.selectAll("g.layer")
|
||||||
|
.data(data)
|
||||||
|
.transition()
|
||||||
.duration(500)
|
.duration(500)
|
||||||
.tweenAttr("transform", function(d) { return "translate(" + x({x: .9 * this.index / n}) + ",0)"; });
|
.tweenAttr("transform", function(d) { return "translate(" + x({x: .9 * this.index / n}) + ",0)"; });
|
||||||
|
|
||||||
t.selectAll("rect")
|
group.selectAll("g.layer")
|
||||||
|
.data(data)
|
||||||
|
.selectAll("rect")
|
||||||
.data(function(d) { return d; })
|
.data(function(d) { return d; })
|
||||||
.transition()
|
.transition()
|
||||||
.duration(500)
|
.duration(500)
|
||||||
|
@ -131,9 +151,32 @@ t.selectAll("rect")
|
||||||
.tweenAttr("y", function(d) { return h - y0(d) + y1(d); })
|
.tweenAttr("y", function(d) { return h - y0(d) + y1(d); })
|
||||||
.tweenAttr("height", function(d) { return y0(d) - y1(d); }); // just in case
|
.tweenAttr("height", function(d) { return y0(d) - y1(d); }); // just in case
|
||||||
|
|
||||||
</script><br>
|
var stack = d3.select("body");
|
||||||
<button onclick="t.apply()">
|
|
||||||
Group
|
stack.select("#group")
|
||||||
</button>
|
.attr("class", "first");
|
||||||
|
|
||||||
|
stack.select("#stack")
|
||||||
|
.attr("class", "last active");
|
||||||
|
|
||||||
|
stack.selectAll("g.layer")
|
||||||
|
.transition()
|
||||||
|
.delay(500) // XXX on end?
|
||||||
|
.duration(500)
|
||||||
|
.tweenAttr("transform", "translate(0,0)");
|
||||||
|
|
||||||
|
stack.selectAll("g.layer")
|
||||||
|
.data(data)
|
||||||
|
.selectAll("rect")
|
||||||
|
.data(function(d) { return d; })
|
||||||
|
.transition()
|
||||||
|
.duration(500)
|
||||||
|
.tweenAttr("y", y1)
|
||||||
|
.tweenAttr("height", function(d) { return y0(d) - y1(d); })
|
||||||
|
.end.transition()
|
||||||
|
.duration(500)
|
||||||
|
.tweenAttr("width", x({x: .9}));
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Загрузка…
Ссылка в новой задаче