D3 Examples - Transitioning Sankey (with malfunctioning labels...)

Transitioning Sankey (with malfunctioning labels...)

Help! Sankey labels not transitioning properly

This is the sankey from my working federal budget dashboard. For some reason when I try to apply transitions in the traditional way, the labels dont relocate properly.

I suspect it has something to do with sankey.js realligning the sankey categories by size every time the data is refreshed, but haven't been able to find a solution.

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
​
<head>
    <title>US Federal Budget Balance, 1968-2017</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=960" />
    <script src="d3.min.js"></script>
    <script src="sankey.js"></script>
    <script src="d3-simple-slider.min.js"></script>
    <style type="text/css">
    .node rect {
        fill-opacity: .9;
        shape-rendering: crispEdges;
    }
    .node text {
        pointer-events: none;
        text-shadow: 0px 0px 2px #fff;
        font-weight: 1000;
    }
​
    .link {
        fill: none;
        stroke: #000;
        stroke-opacity: .4;
    }
​
    .line {
        fill: none;
        stroke-width: 3px;
        opacity: .3;
    }
​
    .thisYearLine line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1;
        opacity: 0.5;
    }
    </style>
</head>
​
<body><div id="barsContainer" class="container">
        <div class="row align-items-center">
            <div id="slider"></div>
        </div>
    </div>
    <div id="sankeyContainer" class="container">
    </div>
    <script src="budget-dashboard.js"></script>
</body>
​
</html>
    