У меня есть строковый массив, который содержит более 150 элементов. Я пытаюсь визуализировать матрицу самообнаружения способом, подобным this . Однако когда я пытаюсь запустить код, время загрузки невероятно велико.
Я использую d3.js для визуализации, и именно в процессе рендеринга существует большая часть задержки.
Матричная переменная, в которой я использую, представляет собой массив объектов Link, имеющих свойство x, y, id, weight.
let words: string[] = data.lyrics.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").replace(/\s{2,}/g, " ").split(" ");
let words_map: Map < string, number > = new Map();
let matrix: Array < Link > = new Array();
for (let i = 0; i < words.length; i++) {
for (let j = 0; j < words.length; j++) {
let link: Link = {
id: "(" + words[i] + " " + i.toString() + ", " + words[j] + " " + j.toString() + ")",
x: i.toString(),
y: j.toString(),
weight: "0"
}
if (words[i].toUpperCase() === words[j].toUpperCase()) {
if (words_map.has(words[i])) {
words_map.set(words[i], words_map.get(lyrics[i]) + 1);
} else {
words_map.set(lyrics[i], 2)
}
link.weight = words_map.get(lyrics[i]).toString();
}
matrix.push(link);
}
}
d3.select("svg")
.append("g")
.attr("id", "adjacencyG")
.selectAll("rect")
.data(matrix)
.enter()
.append("rect")
.attr("width", 3)
.attr("height", 3)
.attr("x", function(d) {
return parseInt(d.x) * 3
})
.attr("y", function(d) {
return parseInt(d.y) * 3
})
.style("stroke", "black")
.style("stroke-width", "1px")
.style("fill", "red")
.style("fill-opacity", function(d) {
return parseInt(d.weight) * .2
})
Время выполнения из приведенного выше кода, который я вставил для входного массива из 220 элементов, занимает 8 секунд для построения графика. С данным кодом, что я могу сделать, чтобы ускорить процесс рендеринга?