0
JavaScript新手，我正在試驗d3.js.我想創建一個可視化比較不同排序算法的網站。基本上，我修改排序算法以擁有'displayArray'（一個二維數組，它是排序算法循環的每次迭代的快照）。然後我遍歷該循環，並在每次迭代的d3中創建一個條形圖。結果看起來類似於着名的Sounds of Sorting。但是，我無法同時運行我的動畫功能。看起來，如果兩個動畫同時進行，它們會發生在同一個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