res.Magic Flows
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', 12) .attr("font-family", "sans-serif") .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(); }
nodeWidth = 15
sankey = { const sankey = d3.sankey() .nodeWidth(15) .nodePadding(10) .extent([[1, 1], [width - 1, height - 6]]); return sankey; }
// format = { // const f = d3.format(",.0f"); // return d => `${f(d)} TWh`; // }
color = { const color = d3.scaleOrdinal(d3.schemeCategory10); return name => color(name.replace(/ .*/, "")); }
data_og= d3.json("https://gist.githubusercontent.com/mbostock/ca9a0bb7ba204d12974bca90acc507c0/raw/398136b7db83d7d7fd89181b080924eb76041692/energy.json")
data = d3.json("https://gist.githubusercontent.com/nscals/30d309e2fb48ab6e91b3bc9deb104dc2/raw/1ad97695429d54ca32dab574a78e18630b177c16/skankey.json")
height = 540
d3 = require("d3-selection@1", "d3-fetch@1", "d3-format@1", "d3-scale@2", "d3-scale-chromatic@1", "d3-sankey@0.7", "d3-drag")