Color setting

index.html

@@ -96,6 +96,18 @@
                             <label class="block text-sm text-gray-600 mb-1">Link Alpha</label>
                             <input type="range" id="link-alpha" min="0.1" max="1" step="0.1" value="0.5" class="w-full">
                         </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">Link Color Mode</label>
+                            <select id="link-color-mode" class="w-full p-2 border rounded-md">
+                                <option value="source">Source Node Color</option>
+                                <option value="target">Target Node Color</option>
+                                <option value="static">Static Color</option>
+                            </select>
+                        </div>
+                        <div id="static-link-color-container" class="hidden">
+                            <label class="block text-sm text-gray-600 mb-1">Link Static Color</label>
+                            <input type="color" id="static-link-color" value="#93c5fd" class="w-full h-8">
+                        </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Diagram Height</label>
                             <input type="range" id="diagram-height" min="300" max="800" value="400" class="w-full">

script.js

@@ -544,9 +544,18 @@ function initDiagram() {
         .data(links)
         .join("path")
         .attr("d", sankey.link())
-        .attr("stroke", d => {
-            const srcColor = sankeyData.nodes[d.source.index]?.color || "#93c5fd";
-            const rgb = hexToRgb(srcColor);
+    link.attr("stroke", d => {
+            const linkColorMode = document.getElementById('link-color-mode').value;
+            let color;
+            if (linkColorMode === 'static') {
+                color = document.getElementById('static-link-color').value;
+            } else {
+                color = linkColorMode === 'source' 
+                    ? d.source.color 
+                    : d.target.color;
+            }
+            const finalColor = color || "#93c5fd";
+            const rgb = hexToRgb(finalColor);
             return `rgba(${rgb.r},${rgb.g},${rgb.b},${linkAlpha})`;
         })
         .attr("stroke-width", d => Math.max(1, d.dy))
@@ -973,6 +982,16 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('node-width').addEventListener('input', initDiagram);
     document.getElementById('diagram-height').addEventListener('input', initDiagram);
     document.getElementById('link-alpha').addEventListener('input', initDiagram);
+    document.getElementById('static-link-color').addEventListener('input', initDiagram);
+    
+    // Handle link color mode changes
+    const linkColorMode = document.getElementById('link-color-mode');
+    const staticColorContainer = document.getElementById('static-link-color-container');
+    
+    linkColorMode.addEventListener('change', () => {
+        staticColorContainer.classList.toggle('hidden', linkColorMode.value !== 'static');
+        initDiagram();
+    });
 
     // Initialize dropdowns and lists
     updateLists();