D3.js timer()サンプル 棒グラフが サイン波で動きます ≪SVG版≫
前回の正弦波のアニメーションは、ＣＳＳ版でした。
SVGを使用して波の動きをつくってみました。
描画エリアのサイズは、前回のＣＳＳ版より小さめにしてみました。
で、サンプルはこちら → D3.jsサンプル SVGでサイン波を うねうね動かす
うねうねするのを 見ていると 癒されます （笑
SVGを使用して波の動きをつくってみました。
描画エリアのサイズは、前回のＣＳＳ版より小さめにしてみました。
で、サンプルはこちら → D3.jsサンプル SVGでサイン波を うねうね動かす
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>D3.js サイン波 サンプル SVG版</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg id="prt" width="570" height="210"></svg> // SVG描画エリアを確保
<script type="text/javascript">
var dataset = [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90,
100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200,
210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310,
320, 330, 340, 350, 360 ];
var width = 10;
var height = 100;
var a = 0;
var svg = d3.select("#prt");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width", width)
.attr("height", function(d) {
var aa = Math.sin( d / 180 * Math.PI ) * 100;
return Math.abs(aa); })
.attr("x", function(d, i) { return i*(width+5)+10 })
.attr("y", function(d){ // 棒の描画開始位置（Ｙ方向）を決めます
var aa = Math.sin( d / 180 * Math.PI ) * 100;
if ( aa < 0 ) { aa = 0; }
return 105 - aa })
.attr("fill", "cyan")
.attr("stroke", "blue")
.attr("stroke-width", "2");
d3.timer(function(){
svg.selectAll("rect")
.data(dataset)
.attr("height", function(d) {
var aa = Math.sin( (d+a) / 180 * Math.PI ) * 100;
return Math.abs(aa); })
.attr("y", function(d){
var aa = Math.sin( (d+a) / 180 * Math.PI ) * 100;
if ( aa < 0 ) { aa = 0; }
return 105 - aa });
a = a + 1.0; // 動きの間隔（正弦波の角度；単位はデグリー）を指定
if ( a >= 360 ) { a = a - 360; }
});
</script>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>D3.js サイン波 サンプル SVG版</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg id="prt" width="570" height="210"></svg> // SVG描画エリアを確保
<script type="text/javascript">
var dataset = [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90,
100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200,
210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310,
320, 330, 340, 350, 360 ];
var width = 10;
var height = 100;
var a = 0;
var svg = d3.select("#prt");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width", width)
.attr("height", function(d) {
var aa = Math.sin( d / 180 * Math.PI ) * 100;
return Math.abs(aa); })
.attr("x", function(d, i) { return i*(width+5)+10 })
.attr("y", function(d){ // 棒の描画開始位置（Ｙ方向）を決めます
var aa = Math.sin( d / 180 * Math.PI ) * 100;
if ( aa < 0 ) { aa = 0; }
return 105 - aa })
.attr("fill", "cyan")
.attr("stroke", "blue")
.attr("stroke-width", "2");
d3.timer(function(){
svg.selectAll("rect")
.data(dataset)
.attr("height", function(d) {
var aa = Math.sin( (d+a) / 180 * Math.PI ) * 100;
return Math.abs(aa); })
.attr("y", function(d){
var aa = Math.sin( (d+a) / 180 * Math.PI ) * 100;
if ( aa < 0 ) { aa = 0; }
return 105 - aa });
a = a + 1.0; // 動きの間隔（正弦波の角度；単位はデグリー）を指定
if ( a >= 360 ) { a = a - 360; }
});
</script>
</body>
</html>
うねうねするのを 見ていると 癒されます （笑