25:["$","title",null,{"children":"HW01 Strong baseline | 吳泳霈's Workspace | Observable"}] 49:T1b1e,simple1= { // 指定圖表的尺寸。 const width = 1500; const height = 900; // 計算圖形並啟動力模擬。 const root = d3.hierarchy(simple); const links = root.links(); const nodes = root.descendants(); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(100).strength(1)) .force("charge", d3.forceManyBody().strength(-700)) //防止節點重疊 .force('collide',d3.forceCollide().radius(30).iterations(0)) .force("x", d3.forceX()) .force("y", d3.forceY()); // 創建容器 SVG。 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // 添加連結。 const link = svg.append("g") .attr("stroke", "#00f") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line"); const linkForce = d3.forceLink(links) .id(d => d.id) .distance(2000) // 增加連結的距離 .strength(1); // 可選：設定連結的強度 // 設定節點的顏色，根據階層關係選擇不同的顏色 const colorScale = d3.scaleOrdinal(d3.schemeCategory10); // 使用 D3 的顏色比例尺 // 添加節點。 const node = svg.append("g") .selectAll("g") .data(nodes) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) // 定位節點 .call(drag(simulation)) //.on("click", toggleNode) // 添加點擊事件處理程序 // 添加節點外框 const circleRadius = 20; // 調整圓圈半徑大小 node.append("circle") .attr("r", circleRadius) .attr("fill", "white") // 內部填充顏色 .attr("stroke", d => colorScale(d.depth)) // 外框顏色根據節點深度 .attr("stroke-width", 3); // 在節點外框周圍添加多個圖片 const numImages = 10; // 圖片的數量 const imageRadius = circleRadius + 10; // 圖片環繞外框的半徑 const imageWidth = 20; // 圖片的寬度 const imageHeight = 20; // 圖片的高度 const imagesGroup = node.append("g"); // 新增一個元素用於包裝圖片 for (let i = 0; i < numImages; i++) { const angle = (i / numImages) * 2 * Math.PI; // 計算每個圖片的角度 const x = imageRadius * Math.cos(angle); // 計算 x 座標 const y = imageRadius * Math.sin(angle); // 計算 y 座標 imagesGroup.append("image") .attr("xlink:href", d => { if(d.data.leval == 2){ // 如果有子節點，顯示子節點的資訊 const score = parseInt(d.data[`Hw${i+1}_score`]); return url_list[score] } }) // 設定圖片連結，這裡假設每個節點有一個 imageURL 屬性 .attr("x", x - imageWidth / 2) // 調整 x 位置，使圖片居中 .attr("y", y - imageHeight / 2) // 調整 y 位置，使圖片居中 .attr("width", imageWidth) .attr("height", imageHeight); } //設定圖片大小 const size_offset = 1.2;//控制內圖片大小 // 計算偏移量 const offset = size_offset / 2;//控制內圖片放置位置的偏移量 /* 添加內圖 node.append("image") .attr("x", -(circleRadius * offset)) // 將圖片的左上角放在圓圈框的左上角 .attr("y", -(circleRadius * offset)) // 將圖片的左上角放在圓圈框的左上角 .attr("width", circleRadius * size_offset) // 設置圖片寬度為圓圈直徑的兩倍 .attr("height", circleRadius * size_offset) // 設置圖片高度為圓圈直徑的兩倍 .attr("href",d => d.data.image_url);*/ //添加節點文字說明 node.append("title") .text(d => { if (d.data.leval == 1) { // 如果沒有子節點，顯示父節點的資訊 return d.data.Name; } /*else if(d.data.leval == 2){ return "組別 : "+d.data.Group+ "\n組長 : "+d.data.Teamleadername+ "\n隊名 : "+d.data.Teamname+ "\n團隊里程數 : "+d.data.Team_Mileage; }*/ else if(d.data.leval == 2){ // 如果有子節點，顯示子節點的資訊 return "序號 : "+d.data.Group+ "\n系所 : "+d.data.Department+ "\n學號 : "+d.data.Classnumber+ "\n姓名 : "+d.data.Name+ "\nGitHub 帳號 : "+d.data.GitHub+ "\n作業1成績 : "+d.data.Hw1_score+ "分\n作業2成績 : "+d.data.Hw2_score+ "分\n作業3成績 : "+d.data.Hw3_score+ "分\n作業4成績 : "+d.data.Hw4_score+ "分\n作業5成績 : "+d.data.Hw5_score+ "分\n作業6成績 : "+d.data.Hw6_score+ "分\n作業7成績 : "+d.data.Hw7_score+ "分\n作業8成績 : "+d.data.Hw8_score+ "分\n作業9成績 : "+d.data.Hw9_score+ "分\n作業10成績 : "+d.data.Hw10_score+"分"; } } );//加入要顯示的資訊 // 設定節點初始位置在畫布的中間 nodes.forEach(node => { node.y = 0; // 將y座標設定在畫布的中間 }); // 更新力模擬的y方向力，讓節點向下運動 simulation.force("y", d3.forceY().strength(0.1).y(d => d.depth * 30)); // 調整動力的方向和大小 simulation.on("tick", () => { node.attr("transform", d => `translate(${d.x},${d.y})`); // 更新節點位置 link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); }); /* 實現點擊收縮擴張功能 function toggleNode(event, d) { if (d.data.leval == 1) { // 切換其他節點和連接的顯示 var trans = true; nodes.forEach(node => { if (node.data.leval == 2) { node.collapsed = !node.collapsed; trans = node.collapsed; }else if(node.data.leval == 3 && trans) { node.collapsed = trans; } }); }else if (d.data.leval == 2) { // 切換其他節點和連接的顯示 var G = d.data.Group; nodes.forEach(node => { if (node.data.leval > 2 && node.data.Group == G) { node.collapsed = !node.collapsed; } }); } update(); } */ function update() { node.attr("transform", d => `translate(${d.x},${d.y})`); link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); // 更新節點顯示 node.style("display", d => d.collapsed ? "none" : null); link.style("display", d => d.target.collapsed ? "none" : null); } invalidation.then(() => simulation.stop()); return svg.node(); }4a:[{"id":"7cb799c175f8ca73eb2ae0d39836a549353049b3f55816f4b2b04f18c41e2116afc4491d387776be4b2b1c3198c70baae8542b916b65e0689113375726404647","href":"https://static.observableusercontent.com/files/7cb799c175f8ca73eb2ae0d39836a549353049b3f55816f4b2b04f18c41e2116afc4491d387776be4b2b1c3198c70baae8542b916b65e0689113375726404647","name":"simple.json","type":"application/json","lastModified":1700065065922.873,"size":55320}] 29:{"id":"5c375b43f8a6c639","slug":null,"title":"HW01 Strong baseline","thumbnail":"3a1838872e371d8ed3465a6c80891d65037a72f591e014a617bf5909c5277f9e","access_level":"public","create_time":"$D2023-10-18T13:59:13.730Z","update_time":"$D2023-11-15T16:44:14.773Z","view_time":null,"first_public_time":"$D2023-10-18T13:59:13.730Z","has_unpublished_edits":null,"fork":{"id":"3f6789736b39154c","slug":"radial-stacked-bar-chart/2","title":"Radial stacked bar chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"29e9919e2149a3b6","login":"yung2-ws","name":"吳泳霈's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8fa6305ec65f9838840bdad6154729ed5d74e1f8f19a9cf360eaae4ae27c55bd","tier":"starter_2024","bio":"Hi","followed_by_you":false,"follows_you":false},"version":313,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd0b855bf75e6148","login":"yuan-pei","name":"yung","avatar_url":"https://avatars-next.observableusercontent.com/ea41d57d795c2440451e2557b46f87eb058ab8538456a19fae329d98db369c7f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"bd0b855bf75e6148","login":"yuan-pei","name":"yung","avatar_url":"https://avatars-next.observableusercontent.com/ea41d57d795c2440451e2557b46f87eb058ab8538456a19fae329d98db369c7f","tier":null,"role":"editor"},{"type":"team","id":"29e9919e2149a3b6","login":"yung2-ws","name":"吳泳霈's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8fa6305ec65f9838840bdad6154729ed5d74e1f8f19a9cf360eaae4ae27c55bd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HW01 Strong baseline","cells":[{"id":0,"value":"

HW01 Strong baseline

D3 › Gallery

\n\n# HW01 Strong baseline (4pt)\n\n繪製 v7 創新成績表，參考 D3畫廊，修改範例並推出創新成績表。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"### Requirement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"simple = FileAttachment(\"simple.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"url_list= [\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/01.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/11.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/12.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/21.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/22.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/31.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/32.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/41.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/42.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/51.svg\",\n \"https://tjhsieh.github.io/c/vis/vis2023f/syllabus/grade/svg10/52.svg\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null