Give user control over whether endpoints should be justified.

Fixes #11.

LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2014-2015, Steve Bogart, <sbogart@sankeymatic.com>
+Copyright (c) 2014-2021, Steve Bogart, <sbogart@sankeymatic.com>
 
 # ISC (Internet Software Consortium) License:
 

build/index.html

@@ -290,6 +290,25 @@ <h3 class="ui_head" onclick="toggle_panel('svg_options');"><span id="svg_options
 <table id="messages">
 <tr><td id="messages_area"></td></tr>
 </table>
+<h2 class="ui_head" onclick="toggle_panel('layout_options');">
+<span id="layout_options_indicator" class="indicator">&dArr;</span>
+Layout Options<span id="layout_options_hint">...</span></h2>
+<div id="layout_options" class="form_chunk" style="display: none;">
+<div class="form_elements1" style="text-align: center;">
+
+<table style="width: 100%; padding: 0px;"><tr>
+<td style="text-align: left;">
+<input type="checkbox" id="justify_origins" value="1" onchange="process_sankey();">
+<label for="justify_origins">Force all flow <strong>origins</strong> to the left edge</label>
+</td>
+<td style="text-align: right;">
+<label for="justify_ends">Force all flow <strong>endpoints</strong> to the right edge</label>
+<input type="checkbox" id="justify_ends" value="1" onchange="process_sankey();">
+</td>
+</tr></table>
+<small>(Note: these options only apply to complex diagrams with 3 or more columns of nodes.)</small>
+</div>
+</div>
 
 <p id="chart">
 <svg id="sankey_svg" height="600" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

build/sankeymatic.js

@@ -315,7 +315,9 @@ function render_sankey(nodes_in, flows_in, config_in) {
         .nodes(the_clean_json.nodes)
         .links(the_clean_json.links)
         .curvature(curvature)
-        .layout(50);
+        .rightJustifyEndpoints(config_in.justify_ends)
+        .leftJustifyOrigins(config_in.justify_origins)
+        .layout(50); // Note: The 'layout()' step must be LAST.
 
     // flow is a function returning coordinates and specs for each flow area
     flow = sankey.link();
@@ -640,6 +642,8 @@ glob.process_sankey = function () {
         node_padding: 18,
         node_border:   0,
         reverse_graph: 0,
+        justify_origins: 0,
+        justify_ends: 0,
         curvature: 0.5,
         default_flow_inherit: "target",
         default_flow_color: "#666666",
@@ -903,7 +907,8 @@ glob.process_sankey = function () {
 
     // Checkboxes:
     (["display_full_precision", "include_values_in_node_labels",
-        "show_labels", "background_transparent"]).forEach( function(field_name) {
+        "show_labels", "background_transparent", "justify_origins",
+        "justify_ends"]).forEach( function(field_name) {
         approved_config[field_name] = document.getElementById(field_name).checked;
     });