開発環境
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- D3.js (JavaScript Library)
- kjs-array (JavaScript Library)
- Safari(Web browser)
- JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
- JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)
Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の6章(幾何図形とフラクタルを描画)、6.4(プログラミングチャレンジ)、問題6-1(正方形に円を詰める)をJavaScript(とarray.js)で取り組んでみる。
問題6-1(正方形に円を詰める)
コード(Emacs)
HTML5
<div id="graph0"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="array.js"></script>
<script src="sample1.js"></script>
JavaScript
(function () {
'use strict';
var width = 600,
height = 600,
padding = 50,
div_graph = document.querySelector('#graph0'),
drawCircles;
drawCircles = function () {
var svg,
xscale,
yscale,
xaxis,
yaxis,
points = [],
len,
xs = range(1.5, 5, 1),
ys = range(1.5, 5, 1),
r,
circles,
i,
ids = [];
ys.forEach(function (y) {
xs.forEach(function (x) {
points.push([x, y]);
});
});
svg = d3.select('#graph0')
.append('svg')
.attr('width', width)
.attr('height', height);
xscale = d3.scaleLinear()
.domain([1.0, 5.0])
.range([padding, width - padding]);
yscale = d3.scaleLinear()
.domain([1.0, 5.0])
.range([height - padding, padding]);
xaxis = d3.axisBottom(xscale);
yaxis = d3.axisLeft(yscale);
r = xscale(0.5) - xscale(0.0);
svg.append('rect')
.attr('x', padding)
.attr('y', padding)
.attr('width', width - 2 * padding)
.attr('height', height - 2 * padding)
.attr('fill', 'yellow')
.attr('stroke', 'blue');
svg.append('g')
.attr('transform',
'translate(0, ' + (height - padding) + ')')
.call(xaxis);
svg.append('g')
.attr('transform',
'translate(' + padding + ', 0)')
.call(yaxis);
i = 0;
ids.push(setInterval(function () {
// select
circles = svg.selectAll('circle')
.data(points.slice(0, i + 1));
// enter
circles.enter()
.append('circle')
.attr('cx', function (d) {
return xscale(d[0]);
})
.attr('cy', function (d) {
return yscale(d[1]);
})
.attr('r', r)
.attr('fill', 'green')
.attr('stroke', 'blue');
// update
circles.transition()
.duration(2000)
.attr('cx', function (d) {
return xscale(d[0]);
})
.attr('cy', function (d) {
return yscale(d[1]);
})
.attr('r', r)
.attr('fill', 'green')
.attr('stroke', 'blue');
i += 1;
if (i === points.length) {
ids.forEach(function (id) {
clearInterval(id);
});
ids = [];
}
}, 1000));
};
drawCircles();
}());
0 コメント:
コメントを投稿