0
javascriptが新しく、d3.jsを試しています。さまざまなソートアルゴリズムを視覚的に比較するウェブサイトを作りたいと思います。基本的には、並べ替えアルゴリズムを変更して 'displayArray'（並べ替えアルゴリズムのループの各繰り返しのスナップショットである2次元配列）を作成しました。そのループをたどって、各繰り返しのd3に棒グラフを作成します。結果は有名なSounds of Sortingに似ています。しかし、アニメーション機能を同時に実行するのに問題があります。 2つのアニメーションが並行して実行されている場合、同じdiv内で、別々の指定されたコンテナに追加されます。私はすでにFrankenstein method of combining jQuery and D3を使用してこれを達成しましたが、私はアニメーションにD3のみを使用しようとしています。どんな助けや提案も感謝しています。ありがとうございました！異なるオブジェクトのメソッドが同時に実行できない（D3.js）
var w = 100;
var h = 100;
var barPadding = 0.2;
function graphObject(container, dataComp, algorithm) {
_this = this;
this.container = container;
this.createDataSet = function() {
var arry = [];
for (var i = 0; i < 50; i++) {
arry[i] = i + 1;
}
if (dataComp == 'random') {
shuffle(arry);
return arry
} else if (dataComp == 'reverse') {
arry.reverse();
return arry
}
};
this.dataSet = this.createDataSet();
this.createInitalGraph = function() {
_this = this;
var svg = d3.select(container)
.append('svg')
.attr('width', w + '%')
.attr('height', h + '%');
svg.selectAll('rect')
.data(this.dataSet)
.enter()
.append('rect')
.attr('x', function(d, i) {
return (i * (w/_this.dataSet.length)) + '%';
})
.attr('y', function(d) {
return h - d * (100/_this.dataSet.length) + '%';
})
.attr('width', (w/_this.dataSet.length - barPadding) + '%')
.attr('height', function(d) {
return d * (100/_this.dataSet.length) + '%';
})
.attr('fill', function(d) {
return '#ffffff';
});
svg.exit().remove();
};
this.animate = function() {
_this = this
frameArray = [];
if (algorithm == 'bubbleSort') {
frameArray = bubbleSort(this.dataSet);
} else if (algorithm == 'selectionSort') {
frameArray = selectionSort(this.dataSet);
} else if (algorithm == 'cocktailSort') {
frameArray = cocktailSort(this.dataSet);
}
for (var j = 1; j < frameArray.length; j++) {
(function(j) {
setTimeout(function() {
_this.updateGraph(frameArray[j], frameArray[j - 1])
}, j * 30);
})(j);
}
};
this.updateGraph = function(data, prevData) {
var bars = d3.select(container)
.select('svg')
.selectAll('rect')
.data(data);
bars.enter()
.append('rect');
bars.attr('x', function(d, i) {
return (i * (w/data.length)) + '%';
})
.attr('y', function(d) {
return h - d * (100/data.length) + '%';
})
.attr('width', (w/data.length - barPadding) + '%')
.attr('height', function(d) {
return d * (100/data.length) + '%';
})
.attr('fill', function(d, i) {
if (data[i] != prevData[i]) {
return 'red';
} else {
return 'white';
}
});
bars.exit().remove();
};
}
function bubbleSort(items) {
var displayArray = [],
swapped,
temp;
do {
swapped = false;
for (var i = 0; i < items.length; i++) {
displayArray.push(items.slice());
if (items[i] > items[i + 1]) {
temp = items[i];
items[i] = items[i + 1];
items[i + 1] = temp;
swapped = true;
}
}
} while (swapped);
return displayArray;
}
function selectionSort(items) {
var len = items.length,
min,
temp,
displayArray = [];
for (i = 0; i < len; i++) {
min = i;
for (j = i + 1; j < len; j++) {
displayArray.push(items.slice());
if (items[j] < items[min]) {
min = j;
}
}
if (i != min) {
temp = items[i];
items[i] = items[min];
items[min] = temp;
}
}
displayArray.push(items.slice());
displayArray.push(items.slice());
return displayArray;
}
function cocktailSort(items) {
var swapped;
var displayArray = [];
var temp;
do {
for (var i = 0; i <= items.length - 2; i++) {
displayArray.push(items.slice());
if (items[i] > items[i + 1]) {
temp = items[i];
items[i] = items[i + 1];
items[i + 1] = temp;
swapped = true;
}
}
if (!swapped) {
break;
}
swapped = false;
for (i = items.length - 2; i >= 0; i--) {
displayArray.push(items.slice());
if (items[i] > items[i + 1]) {
temp = items[i];
items[i] = items[i + 1];
items[i + 1] = temp;
swapped = true;
}
}
} while (swapped);
return displayArray;
}
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var graph1 = new graphObject('.graphContainer1', 'random', 'bubbleSort');
var graph2 = new graphObject('.graphContainer2', 'random', 'selectionSort');
var graph3 = new graphObject('.graphContainer3', 'random', 'cocktailSort');
graph1.createInitalGraph();
graph2.createInitalGraph();
graph3.createInitalGraph();
$(".BubbleSort").click(function() {
graph1.animate();
});
$(".SelectionSort").click(function() {
graph2.animate();
console.log(graph1.container);
});
$(".CocktailSort").click(function() {
graph3.animate();
});html {
background: black;
}
p {
color: white;
}
.graph {
width: 300px;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="BubbleSort">BubbleSort</button>
<button class="SelectionSort">Selection Sort</button>
<button class="CocktailSort">Cocktail Sort</button>
<p>Bubble Sort </p>
<div class="graph graphContainer1">
</div>
<p>Selection Sort </p>
<div class="graph graphContainer2">
</div>
<p>Cocktail Sort </p>
<div class="graph graphContainer3">
</div>ボーナス質問：どのように私はwindow.requestAnimationFrame代わりにsetTimeoutメソッドを使用して、このアニメーションを実現するのでしょうか？
感謝。 – TylerJ