Question

我有一个字符串数组，可容纳150多个元素。我正在尝试以类似于this的方式可视化自出现矩阵。但是，当我尝试运行代码时，加载时间非常长。

我正在使用d3.js进行可视化，并且在渲染过程中，大多数延迟都存在。

我使用的矩阵变量是具有x，y，id，weight属性的Link对象的数组。

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秒才能绘制图形。有了给出的代码，我可以做些什么来加快渲染过程？

Answer 1

尝试过滤掉一些结果。如果只需要填充一些正方形，请不要用白色填充其他正方形。

可视化自相似矩阵的最佳方法是什么

1 个答案: