File size: 3,427 Bytes
1dc0658 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
async function loadCsvData(url) {
const response = await fetch(url);
const csvText = await response.text();
const cleanedCsvText = csvText.replace(/\r/g, ""); // ここで \r を取り除く
const lines = cleanedCsvText.split("\n");
const headers = lines[0].split(",");
return lines.slice(1).map((line) => {
const data = line.split(",");
return headers.reduce((obj, nextKey, index) => {
obj[nextKey] = data[index];
return obj;
}, {});
});
}
const csvUrl = "info.csv";
// CSVデータを格納するための変数
let csvData;
// CSVファイルをロード
loadCsvData(csvUrl).then((data) => {
csvData = data;
});
// Load data from the JSON file
fetch("mst_data.json")
.then((response) => response.json())
.then((data) => {
const nodes = new vis.DataSet(data.nodes);
const edges = new vis.DataSet(
data.edges.map((edge) => ({
from: edge.from,
to: edge.to,
length: edge.length * 1000,
value: 1 / edge.length,
title: 1 - edge.length,
}))
);
const container = document.getElementById("network");
const graphData = { nodes: nodes, edges: edges };
const options = {
width: "100%",
height: "100%",
nodes: {
font: {
size: 40,
},
},
edges: {
smooth: false,
chosen: false,
},
physics: {
barnesHut: {
// springConstant: 1,
// centralGravity: 0,
// theta: 1,
gravitationalConstant: -100000,
// avoidOverlap: 0.5,
},
},
layout: {
improvedLayout: false,
},
};
const network = new vis.Network(container, graphData, options);
// Add event listener for node clicks
network.on("selectNode", function (params) {
if (params.nodes.length > 0) {
const nodeId = params.nodes[0];
const nodeName = nodes.get(nodeId).label; // Assuming label is the same as node name
const nodeData = csvData.find((item) => item.name === nodeName);
// Update infoview
document.getElementById("node-name").textContent = nodeName;
if (nodeData) {
document.getElementById("node-num-files").textContent =
nodeData.num_files;
document.getElementById("node-duration").textContent =
nodeData.total_duration_min;
document.getElementById("node-f0").textContent = nodeData.f0_mean;
}
}
});
function zoomToNode() {
const nodeName = document.getElementById("model-name-input").value;
const foundNode = nodes.get({
filter: function (item) {
return item.label === nodeName;
},
});
if (foundNode.length > 0) {
const nodeId = foundNode[0].id;
network.focus(nodeId, { scale: 1, animation: true });
network.selectNodes([nodeId]);
document.getElementById("node-name").textContent = nodeName;
} else {
alert("Not found.");
}
}
document
.getElementById("search-button")
.addEventListener("click", zoomToNode);
document
.getElementById("model-name-input")
.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
event.preventDefault();
zoomToNode();
}
});
})
.catch((error) => console.error("Error loading the MST data:", error));
|