Каков наилучший способ визуализации матрицы самоподобия - PullRequest
1 голос
/ 20 июня 2019

У меня есть строковый массив, который содержит более 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 секунд для построения графика. С данным кодом, что я могу сделать, чтобы ускорить процесс рендеринга?

1 Ответ

0 голосов
/ 20 июня 2019

Попробуйте отфильтровать некоторые результаты.Если необходимо заполнить только некоторые квадраты, не пытайтесь заполнить другие белым цветом.

...