2b:null 2c:["$","title",null,{"children":"Adjacency Matrix | Cu | Observable"}] 31:Tb1d,chart = { const { nodes, links } = data; if (!nodes || nodes.length === 0) { return html`

⚠️ No Data Available

Please verify that your data file has been properly loaded

`; } const width = 1000; const height = 1000; const cellSize = Math.min(50, 1000 / nodes.length); // 计算单元格大小 const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("background", "##e67e22") .style("border", "1px solid #ccc"); const margin = { top: 120, left: 75 }; const matrixData = matrix; const orderedNodes = orderNodes(nodes, links, order); svg .selectAll(".row-label") .data(orderedNodes) .enter() .append("text") .attr("class", "row-label") .attr("x", margin.left - 10) .attr("y", (d, i) => margin.top + i * cellSize + cellSize / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .style("font-size", "10px") .style("font-weight", "500") .style("font-family", "Times New Roman") .style("fill", "#2ecc71") // 标签颜色【可修改】 //蓝色系："#3498db" "#2980b9" "#1f77b4" 绿色系："#2ecc71" "#27ae60" "#16a085" //红色系："#e74c3c" "#c0392b" "#e84393" 橙色系："#e67e22" "#d35400" //灰色系："#95a5a6" "#7f8c8d" "#2c3e50" 紫色系："#9b59b6" "#8e44ad" 黄色系："#f1c40f" .text((d) => d.label || d.id); // 添加列标签 svg .selectAll(".col-label") .data(orderedNodes) .enter() .append("text") .attr("class", "col-label") .attr("x", (d, i) => margin.left + i * cellSize + cellSize / 2) .attr("y", margin.top - 13) .attr("text-anchor", "start") .attr("dominant-baseline", "hanging") .attr( "transform", (d, i) => `rotate(-90,${margin.left + i * cellSize + cellSize / 2},${ margin.top - 9 })` ) //【数字9可修改】 .style("font-size", "10px") .style("font-weight", "500") .style("font-family", "Times New Roman") .style("fill", "#2ecc71") .text((d) => d.label || d.id); const row = svg .selectAll(".row") .data(matrixData) .enter() .append("g") .attr("class", "row") .attr( "transform", (d, i) => `translate(${margin.left}, ${margin.top + i * cellSize})` ); row .selectAll(".cell") .data((d) => d) .enter() .append("rect") .attr("x", (d, i) => i * cellSize) .attr("width", cellSize) .attr("height", cellSize) .style("fill", (d) => (d ? "16a085" : "#f0f0f0")) .style("stroke", "#fff") .style("stroke-width", 1); console.log("SVG creation complete, nodes count:", nodes.length); return svg.node(); }32:[{"id":"c906d7e8872ffd3270da871c77fcf5d5900ad6a6299a13976b531a2f4de2ef4a42411a577212320c59ec75a77aa50b8578cc17098e59b353c3173d07d97cefc7","href":"https://static.observableusercontent.com/files/c906d7e8872ffd3270da871c77fcf5d5900ad6a6299a13976b531a2f4de2ef4a42411a577212320c59ec75a77aa50b8578cc17098e59b353c3173d07d97cefc7","name":"got-network (1).graphml","type":"application/xml","lastModified":1761101180918.847,"size":36713},{"id":"c906d7e8872ffd3270da871c77fcf5d5900ad6a6299a13976b531a2f4de2ef4a42411a577212320c59ec75a77aa50b8578cc17098e59b353c3173d07d97cefc7","href":"https://static.observableusercontent.com/files/c906d7e8872ffd3270da871c77fcf5d5900ad6a6299a13976b531a2f4de2ef4a42411a577212320c59ec75a77aa50b8578cc17098e59b353c3173d07d97cefc7","name":"got-network.graphml","type":"application/xml","lastModified":1761101401853.49,"size":36713}] 2f:{"id":"0bb3b1f51c136156","slug":null,"title":"Adjacency Matrix","thumbnail":"c889fdf3ab3729f43cd13c5afda4e2329dc9d2d3e03577085e0721b4af004bf0","access_level":"public","create_time":"$D2025-10-22T02:43:32.170Z","update_time":"$D2025-10-22T07:45:15.199Z","view_time":null,"first_public_time":"$D2025-10-22T02:45:21.293Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024"},"version":44,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null}],"members":[{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Adjacency Matrix","cells":[{"id":0,"value":"# Adjacency Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"gotNetwork = FileAttachment(\"got-network.graphml\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof order = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = {\n const graphmlFile = FileAttachment(\"got-network.graphml\");\n const text = await graphmlFile.text();\n const parser = new DOMParser();\n const xmlDoc = parser.parseFromString(text, \"text/xml\");\n \n const nodeElements = xmlDoc.getElementsByTagName(\"node\");\n const nodes = Array.from(nodeElements).map(node => {\n const id = node.getAttribute(\"id\");\n return { id, label: id, group: 0 };\n });\n \n const edgeElements = xmlDoc.getElementsByTagName(\"edge\");\n const links = Array.from(edgeElements).map(edge => ({\n source: edge.getAttribute(\"source\"),\n target: edge.getAttribute(\"target\"),\n value: 1\n }));\n \n return { nodes, links };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function orderNodes(nodes, links, order) {\n const degree = (node) => {\n return links.filter(link => \n link.source === node.id || link.target === node.id\n ).length;\n };\n\n const clustering = (node) => {\n return 0; \n };\n \n switch (order) {\n case \"name\": \n return nodes.sort((a, b) => d3.ascending(a.label || a.id, b.label || b.id));\n case \"degree\": \n return nodes.sort((a, b) => d3.descending(degree(a), degree(b)));\n case \"group\": \n return nodes.sort((a, b) => d3.ascending(a.group, b.group));\n case \"clustering\": \n return nodes.sort((a, b) => d3.descending(clustering(a), clustering(b)));\n default: \n return nodes;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"matrix = {\n const nodes = orderNodes(data.nodes, data.links, order);\n const index = new Map(nodes.map((d, i) => [d.id, i]));\n const matrix = Array.from(nodes, () => new Array(nodes.length).fill(0));\n\n for (const link of data.links) {\n const i = index.get(link.source);\n const j = index.get(link.target);\n if (i !== undefined && j !== undefined) {\n matrix[i][j] = link.value || 1;\n matrix[j][i] = link.value || 1;\n }\n }\n\n return matrix;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"