prueba

script.js

@@ -1,4 +1,282 @@
 
+// Define the d3.sankey layout function
+d3.sankey = function() {
+    var sankey = {},
+        nodeWidth = 24,
+        nodePadding = 8,
+        size = [1, 1],
+        nodes = [],
+        links = [];
+
+    sankey.nodeWidth = function(_) {
+        if (!arguments.length) return nodeWidth;
+        nodeWidth = +_;
+        return sankey;
+    };
+
+    sankey.nodePadding = function(_) {
+        if (!arguments.length) return nodePadding;
+        nodePadding = +_;
+        return sankey;
+    };
+
+    sankey.nodes = function(_) {
+        if (!arguments.length) return nodes;
+        nodes = _;
+        return sankey;
+    };
+
+    sankey.links = function(_) {
+        if (!arguments.length) return links;
+        links = _;
+        return sankey;
+    };
+
+    sankey.size = function(_) {
+        if (!arguments.length) return size;
+        size = _;
+        return sankey;
+    };
+
+    sankey.layout = function(iterations) {
+        if (!nodes.length) return sankey;
+        computeNodeLinks();
+        computeNodeValues();
+        computeNodeBreadths();
+        computeNodeDepths(iterations || 32);
+        computeLinkDepths();
+        return sankey;
+    };
+
+    sankey.relayout = function() {
+        computeLinkDepths();
+        return sankey;
+    };
+
+    sankey.link = function() {
+        var curvature = .5;
+
+        function link(d) {
+            var x0 = d.source.x + d.source.dx,
+                x1 = d.target.x,
+                xi = d3.interpolateNumber(x0, x1),
+                x2 = xi(curvature),
+                x3 = xi(1 - curvature),
+                y0 = d.source.y + d.sy + d.dy / 2,
+                y1 = d.target.y + d.ty + d.dy / 2;
+            return "M" + x0 + "," + y0
+                 + "C" + x2 + "," + y0
+                 + " " + x3 + "," + y1
+                 + " " + x1 + "," + y1;
+        }
+
+        link.curvature = function(_) {
+            if (!arguments.length) return curvature;
+            curvature = +_;
+            return link;
+        };
+
+        return link;
+    };
+
+    // Populate the sourceLinks and targetLinks for each node.
+    function computeNodeLinks() {
+        nodes.forEach(function(node) {
+            node.sourceLinks = [];
+            node.targetLinks = [];
+        });
+        links.forEach(function(link) {
+            var source = link.source,
+                target = link.target;
+            if (typeof source === "number") source = link.source = nodes[link.source];
+            if (typeof target === "number") target = link.target = nodes[link.target];
+            source.sourceLinks.push(link);
+            target.targetLinks.push(link);
+        });
+    }
+
+    // Compute the value (size) of each node by summing the associated links.
+    function computeNodeValues() {
+        nodes.forEach(function(node) {
+            node.value = Math.max(
+                d3.sum(node.sourceLinks, value),
+                d3.sum(node.targetLinks, value)
+            );
+        });
+    }
+
+    function computeNodeBreadths() {
+        var remainingNodes = nodes,
+            nextNodes,
+            x = 0;
+
+        while (remainingNodes.length) {
+            nextNodes = [];
+            remainingNodes.forEach(function(node) {
+                node.x = x;
+                node.dx = nodeWidth;
+                node.sourceLinks.forEach(function(link) {
+                    if (nextNodes.indexOf(link.target) < 0) {
+                        nextNodes.push(link.target);
+                    }
+                });
+            });
+            remainingNodes = nextNodes;
+            ++x;
+        }
+
+        moveSinksRight(x);
+        scaleNodeBreadths((size[0] - nodeWidth) / (x - 1));
+    }
+
+    function moveSinksRight(x) {
+        nodes.forEach(function(node) {
+            if (!node.sourceLinks.length) {
+                node.x = x - 1;
+            }
+        });
+    }
+
+    function scaleNodeBreadths(kx) {
+        nodes.forEach(function(node) {
+            node.x *= kx;
+        });
+    }
+
+    function computeNodeDepths(iterations) {
+        // Group nodes by x-coordinate
+        var nodesByBreadth = d3.group(nodes, d => d.x);
+        // Convert Map to Array and ensure it's sorted
+        nodesByBreadth = Array.from(nodesByBreadth.values());
+
+        initializeNodeDepth();
+        resolveCollisions();
+        for (var alpha = 1; iterations > 0; --iterations) {
+            relaxRightToLeft(alpha *= .99);
+            resolveCollisions();
+            relaxLeftToRight(alpha);
+            resolveCollisions();
+        }
+
+        function initializeNodeDepth() {
+            // Calculate vertical scaling factor
+            var ky = d3.min(nodesByBreadth, function(nodes) {
+                return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
+            });
+
+            nodesByBreadth.forEach(function(nodes) {
+                nodes.forEach(function(node, i) {
+                    node.y = i;
+                    node.dy = node.value * ky;
+                });
+            });
+
+            links.forEach(function(link) {
+                link.dy = link.value * ky;
+            });
+        }
+
+        function relaxLeftToRight(alpha) {
+            nodesByBreadth.forEach(function(nodes) {
+                nodes.forEach(function(node) {
+                    if (node.targetLinks.length) {
+                        var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
+                        node.y += (y - center(node)) * alpha;
+                    }
+                });
+            });
+
+            function weightedSource(link) {
+                return center(link.source) * link.value;
+            }
+        }
+
+        function relaxRightToLeft(alpha) {
+            nodesByBreadth.slice().reverse().forEach(function(nodes) {
+                nodes.forEach(function(node) {
+                    if (node.sourceLinks.length) {
+                        var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
+                        node.y += (y - center(node)) * alpha;
+                    }
+                });
+            });
+
+            function weightedTarget(link) {
+                return center(link.target) * link.value;
+            }
+        }
+
+        function resolveCollisions() {
+            nodesByBreadth.forEach(function(nodes) {
+                var node,
+                    dy,
+                    y0 = 0,
+                    n = nodes.length,
+                    i;
+
+                nodes.sort(ascendingDepth);
+                for (i = 0; i < n; ++i) {
+                    node = nodes[i];
+                    dy = y0 - node.y;
+                    if (dy > 0) node.y += dy;
+                    y0 = node.y + node.dy + nodePadding;
+                }
+
+                dy = y0 - nodePadding - size[1];
+                if (dy > 0) {
+                    y0 = node.y -= dy;
+                    for (i = n - 2; i >= 0; --i) {
+                        node = nodes[i];
+                        dy = node.y + node.dy + nodePadding - y0;
+                        if (dy > 0) node.y -= dy;
+                        y0 = node.y;
+                    }
+                }
+            });
+        }
+
+        function ascendingDepth(a, b) {
+            return a.y - b.y;
+        }
+    }
+
+    function computeLinkDepths() {
+        nodes.forEach(function(node) {
+            node.sourceLinks.sort(ascendingTargetDepth);
+            node.targetLinks.sort(ascendingSourceDepth);
+        });
+        nodes.forEach(function(node) {
+            var sy = 0, ty = 0;
+            node.sourceLinks.forEach(function(link) {
+                link.sy = sy;
+                sy += link.dy;
+            });
+            node.targetLinks.forEach(function(link) {
+                link.ty = ty;
+                ty += link.dy;
+            });
+        });
+
+        function ascendingSourceDepth(a, b) {
+            return a.source.y - b.source.y;
+        }
+
+        function ascendingTargetDepth(a, b) {
+            return a.target.y - b.target.y;
+        }
+    }
+
+    function value(link) {
+        return link.value;
+    }
+
+    function center(node) {
+        return node.y + node.dy / 2;
+    }
+
+    return sankey;
+};
+
 // Sankey diagram data structure with example data
 let sankeyData = {
     nodes: [
@@ -56,17 +334,14 @@ function initDiagram() {
     
     const sankey = d3.sankey()
         .nodeWidth(parseInt(document.getElementById('node-width').value))
-        .nodePadding(20)
-        .extent([[textPadding/2, textPadding/2], [width - textPadding/2, height - textPadding/2]]);
-    
-    // Generate the sankey diagram
-    const graph = sankey({
-        nodes: sankeyData.nodes.map(d => Object.assign({}, d)),
-        links: sankeyData.links.map(d => Object.assign({}, d))
-    });
+        .nodePadding(8)
+        .size([width - textPadding, height - textPadding])
+        .nodes(sankeyData.nodes.map(d => Object.assign({}, d)))
+        .links(sankeyData.links.map(d => Object.assign({}, d)))
+        .layout(32); // Increase iterations for better layout
     
-    const nodes = graph.nodes;
-    const links = graph.links;
+    const nodes = sankey.nodes();
+    const links = sankey.links();
     
     // Clear previous diagram
     svg.attr("width", width)
@@ -80,13 +355,13 @@ function initDiagram() {
         .selectAll("path")
         .data(links)
         .join("path")
-        .attr("d", d3.sankeyLinkHorizontal())
+        .attr("d", sankey.link())
         .attr("stroke", d => {
             const srcColor = sankeyData.nodes[d.source.index]?.color || "#93c5fd";
             const rgb = hexToRgb(srcColor);
             return `rgba(${rgb.r},${rgb.g},${rgb.b},${linkAlpha})`;
         })
-        .attr("stroke-width", d => Math.max(1, d.width))
+        .attr("stroke-width", d => Math.max(1, d.dy))
         .style("mix-blend-mode", "multiply")
         .on("mouseover", function() {
             d3.select(this).attr("stroke-opacity", 0.8);
@@ -100,17 +375,17 @@ function initDiagram() {
         .selectAll("g")
         .data(nodes)
         .join("g")
-        .attr("transform", d => `translate(${d.x0},${d.y0})`);
+        .attr("transform", d => `translate(${d.x},${d.y})`);
 
     // Apply stored positions if they exist
     node.attr("transform", d => {
         const pos = nodePositions[d.index];
-        return pos ? `translate(${pos.x},${pos.y})` : `translate(${d.x0},${d.y0})`;
+        return pos ? `translate(${pos.x},${pos.y})` : `translate(${d.x},${d.y})`;
     });
 
     node.append("rect")
-        .attr("height", d => d.y1 - d.y0)
-        .attr("width", d => d.x1 - d.x0)
+        .attr("height", d => d.dy)
+        .attr("width", d => d.dx)
         .attr("fill", d => d.color || "#4f46e5")
         .attr("stroke", "#fff")
         .attr("stroke-width", 1)
@@ -119,22 +394,21 @@ function initDiagram() {
 
     // Add drag behavior
     node.call(d3.drag()
-        .subject(d => ({ x: d.x0, y: d.y0 }))
+        .subject(d => ({ x: d.x, y: d.y }))
         .on("start", function(event) {
             d3.select(this).raise();
         })
         .on("drag", function(event, d) {
-            // Update node position
-            d.x0 = event.x;
-            d.x1 = event.x + (d.x1 - d.x0);
-            d.y0 = event.y;
-            d.y1 = event.y + (d.y1 - d.y0);
-
-            nodePositions[d.index] = { x: d.x0, y: d.y0 };
-            d3.select(this).attr("transform", `translate(${d.x0},${d.y0})`);
+            // Keep x position fixed, only allow vertical movement
+            d.y = event.y;
+            nodePositions[d.index] = { x: d.x, y: d.y };
+            d3.select(this).attr("transform", `translate(${d.x},${d.y})`);
 
             // Update links
-            link.attr("d", d3.sankeyLinkHorizontal());
+            link.attr("d", sankey.link());
+
+            // After dragging, relayout to maintain proper link positions
+            sankey.relayout();
         })
     );