3e:null 3f:["$","title",null,{"children":"Untitled | 云深 | Observable"}] 45:Taba,chart = { const width = 928; const height = 720; const sankey = d3.sankey() .nodeSort(null) .linkSort(null) .nodeWidth(20) .nodePadding(20) .extent([[0, 20], [width, height - 20]]) const color = d3.scaleOrdinal(["Perished"], ["#da4f81"]).unknown("#ccc"); const colors = ['#e0f0ff','#eafcfd','#eafcfd','#f2eede']; const rect_color = ['#3098fc','#03c5ff','#74eef3']; const svg = d3.create("svg") .attr("viewBox", [0, 0, width + 100, height + 100]) .attr("width", width - 20) .attr("height", height - 20) .attr("style", "max-width: 100%; height: auto;"); const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.create(d)), links: graph.links.map(d => Object.create(d)) }); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => { let num = Math.floor(Math.random() * 3); return rect_color[num]; }) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); function handleTest(d, i) { console.log(d, i.names); } svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => { console.log(d, "d"); return colors[d.source.layer] || "#333" }) .attr("stroke-width", d => { return d.width; }) .style("mix-blend-mode", "multiply") .on("click", (d, i)=>handleTest(d, i)) .append("title") .text(d => { return `${d.names.join(" → ")}\n${d.value.toLocaleString()}` }); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); const text_g = svg.append("g"); text_g.append("text") .attr("x", d => -20) .attr("y", d => 690) .text(d => "测试数据"); text_g.append("text") .attr("x", d => 280) .attr("y", d => 690) .text(d => "测试数据"); text_g.append("text") .attr("x", d => 580) .attr("y", d => 690) .text(d => "测试数据"); text_g.append("text") .attr("x", d => 880) .attr("y", d => 720) .text(d => "测试数据"); return svg.node(); }46:T457,graph = { const keys = data.columns.slice(0, -1); let index = -1; const nodes = []; const nodeByKey = new d3.InternMap([], JSON.stringify);; const indexByKey = new d3.InternMap([], JSON.stringify);; const links = []; for (const k of keys) { for (const d of data) { const key = [k, d[k]]; if (nodeByKey.has(key)) continue; const node = {name: d[k]}; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new d3.InternMap([], JSON.stringify); for (const d of data) { const names = prefix.map(k => d[k]); const value = d.value || 1; let link = linkByKey.get(names); if (link) { link.value += value; continue; } link = { source: indexByKey.get([a, d[a]]), target: indexByKey.get([b, d[b]]), names, value }; links.push(link); linkByKey.set(names, link); } } return {nodes, links}; }47:[{"id":"3a1e9bb1ba5d9eb731c86c272fccb2543886aca0ef0b80add89f0471177427c5c6627d5ee5d85d011e44cc14019a0509bf309c6db2d347f9bdf7fe26723432d7","href":"https://static.observableusercontent.com/files/3a1e9bb1ba5d9eb731c86c272fccb2543886aca0ef0b80add89f0471177427c5c6627d5ee5d85d011e44cc14019a0509bf309c6db2d347f9bdf7fe26723432d7","name":"titanic.csv","type":"application/octet-stream","lastModified":1717667118069.813,"size":873}] 43:{"id":"01359e450cee03da","slug":null,"title":"","thumbnail":"0938a6e1a4cbc1f670e044c330ee411c3c54b94e144f088eb20612abba804724","access_level":"public","create_time":"$D2024-06-06T09:45:18.069Z","update_time":"$D2024-06-06T11:28:38.862Z","view_time":null,"first_public_time":"$D2024-06-06T09:45:18.069Z","has_unpublished_edits":null,"fork":{"id":"dde4715990f04109","slug":"parallel-sets","title":"Parallel sets","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3d38a5fb69b76039","login":"jackeybiao","name":"云深","avatar_url":"https://avatars-next.observableusercontent.com/fb7034cb0e1e7d26188900bbdce63264644640dd85bdece2c88a7986c65b7999","tier":"starter_2024","bio":"青青子衿悠悠我心","following":false},"version":325,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6f94785ffdecb08b","login":"jackeybiao","name":"云深","avatar_url":"https://avatars-next.observableusercontent.com/fb7034cb0e1e7d26188900bbdce63264644640dd85bdece2c88a7986c65b7999","tier":null,"bio":"青青子衿悠悠我心","following":false}],"members":[{"type":"individual","id":"6f94785ffdecb08b","login":"jackeybiao","name":"云深","avatar_url":"https://avatars-next.observableusercontent.com/fb7034cb0e1e7d26188900bbdce63264644640dd85bdece2c88a7986c65b7999","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":40,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"

Parallel sets

D3 › Gallery

\n\n# Parallel sets\n\n[Parallel sets](https://kosara.net/publications/Bendix_InfoVis_2005.html) are like [parallel coordinates](/@d3/parallel-coordinates), but for categorical dimensions. The thickness of each curved line represents a quantity that is repeatedly subdivided by category. This example looks at the *Titanic* disaster of 1912.\n\nData: [Robert J. MacG. Dawson](http://jse.amstat.org/v3n3/datasets.dawson.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"data = FileAttachment(\"titanic.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"