3f:null 40:["$","title",null,{"children":"Draggable D3 Sankey Diagram | Sean G | Observable"}] 46:Tba3,chart = { const svg = d3.select(DOM.svg(width, height)); const graph = sankey(data); const node = svg.append("g") .attr("stroke", "#000") .selectAll("g") .data(graph.nodes) .enter() .append('g') .attr('transform', d => `translate(${d.x0}, ${d.y0})`) node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)); node.append("text") .attr("x", d => d.x0 < width / 2 ? 6 + (d.x1 - 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") .attr('font-size', 10) .text(d => d.name); node .attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply"); const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); const path = link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); function dragStart (d) { // this.parentNode.appendChild(this); // if (this.nextSibling) this.parentNode.appendChild(this); if (!d.__x) d.__x = d3.event.x; if (!d.__y) d.__y = d3.event.y; if (!d.__x0) d.__x0 = d.x0; if (!d.__y0) d.__y0 = d.y0; if (!d.__x1) d.__x1 = d.x1; if (!d.__y1) d.__y1 = d.y1; } function dragMove(d) { d3.select(this) .attr('transform', function (d) { const dx = d3.event.x - d.__x; const dy = d3.event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; // 防止超出边界 if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } if (d.x1 > width) { d.x0 = width - nodeWidth; d.x1 = width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > height) { d.y0 = height - (d.__y1 - d.__y0); d.y1 = height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); path.attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }47:T605,md`Sankey diagrams visualize the magnitude of flow between nodes in a network. This intricate diagram shows a possible scenario for UK energy production and consumption in 2050: energy supplies are on the left, and demands are on the right. Intermediate nodes group related forms of production and show how energy is converted and transmitted before it is consumed or lost. The thickness of each link encodes the amount of flow from source to target. This notebook is built with d3-sankey, which computes positions via iterative relaxation. After fixing the horizontal position of each node, the algorithm starts from the sources on the left, positioning downstream nodes so as to minimize link distance. A reverse pass is then made from right-to-left, and then the entire process is repeated several times. Overlapping nodes are shifted to avoid collision. The fully automatic layout is convenient for rapid visualization—positioning nodes manually is tedious! However, the algorithm is not perfect; it could be improved to minimize link crossings and to prevent links from intersecting unrelated nodes. It also does not support cyclical networks. Data: Department of Energy & Climate Change, Tom Counsell`48:[] 44:{"id":"ddbff5e2ad730d2b","slug":"dragable-d3-sankey-diagram","title":"Draggable D3 Sankey Diagram","thumbnail":"11a57959c116321e264b09a71071b8a3a5eda1de3fa1994d7a3ad1e7ba90bc14","access_level":"public","create_time":"$D2018-06-02T08:53:08.035Z","update_time":"$D2018-06-07T07:42:26.091Z","view_time":null,"first_public_time":"$D2018-06-02T09:22:19.076Z","has_unpublished_edits":null,"fork":{"id":"99b2e903e7df3b0a","slug":"sankey-component","title":"Sankey diagram component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":11,"starred":false,"owner":{"type":"team","id":"82de3f666ee9fab5","login":"geekplux","name":"Sean G","avatar_url":"https://avatars-next.observableusercontent.com/fe084812a126b253fbbe2e8807670cef52839d6737b00d1e25f1a720fd59ce24","tier":"starter_2024","bio":"Always Exploring","following":false},"version":161,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5087d71063eaa106","login":"geekplux","name":"Sean G","avatar_url":"https://avatars-next.observableusercontent.com/fe084812a126b253fbbe2e8807670cef52839d6737b00d1e25f1a720fd59ce24","tier":null,"bio":"Always Exploring","following":false}],"members":[{"type":"individual","id":"5087d71063eaa106","login":"geekplux","name":"Sean G","avatar_url":"https://avatars-next.observableusercontent.com/fe084812a126b253fbbe2e8807670cef52839d6737b00d1e25f1a720fd59ce24","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":34,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Draggable D3 Sankey Diagram","cells":[{"id":0,"value":"md`# Draggable D3 Sankey Diagram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"nodeWidth = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [width - 1, height - 6]]);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)} TWh`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.json(\"https://gist.githubusercontent.com/mbostock/ca9a0bb7ba204d12974bca90acc507c0/raw/398136b7db83d7d7fd89181b080924eb76041692/energy.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 540","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3-selection@1\", \"d3-fetch@1\", \"d3-format@1\", \"d3-scale@2\", \"d3-scale-chromatic@1\", \"d3-sankey@0.7\", \"d3-drag\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"