d3-sankey not functioning with ES6 imports, or just not functioning,

[Dan DeLorenzo]

Im trying to use d3-sankey and for the most part very faithfully to examples such as this: https://bl.ocks.org/d3noob/013054e8d7807dff76247b81b0e29030
The one difference being I am using ES6 imports to pull in the plug in like so:

import * as d3Sankey from "d3-sankey";

and I am currently using the actual data from the example:

        var testData = {
    "nodes":[
    {"node":0,"name":"node0"},
    {"node":1,"name":"node1"},
    {"node":2,"name":"node2"},
    {"node":3,"name":"node3"},
    {"node":4,"name":"node4"}
    ],
    "links":[
    {"source":0,"target":2,"value":2},
    {"source":1,"target":2,"value":2},
    {"source":1,"target":3,"value":2},
    {"source":0,"target":4,"value":2},
    {"source":2,"target":3,"value":2},
    {"source":2,"target":4,"value":2},
    {"source":3,"target":4,"value":4}
    ]}

Later on when I push my data through the sankey function, it emerges unchanged, yet no errors are thrown. And then of course the transforms all fail because properties like d.x and d.y that d3-sankey would be inserting are not being inserted. Strangely I'm not getting any errors, d3-sankey seems to be not getting hit at all even though Im pretty confident I have imported it properly and it is a function. Below is the code - Any help greatly appreciated:

    function update(data) {


            // Set the sankey diagram properties.
            //NOTHING SEEMS TO BE HAPPENING HERE
            var aSankey = d3Sankey.sankey()
                .size([gWidth, gHeight]);


            var path = d3Sankey.sankeyLinkHorizontal();




            aSankey
                .nodes(testData.nodes)
                .links(testData.links);


                console.log(testData);
            // add in the links
            var link = dataLr.append("g").selectAll(".link")
                .data(testData.links)
                .enter().append("path")
                .attr("class", "link")
                .attr("d", path)
                .style("stroke-width", function(d) { return Math.max(1, d.dy); })
                .sort(function(a, b) { return b.dy - a.dy; });


            // add the link titles
            link.append("title")
                .text(function(d) {
                    //console.log(d);
                    return d.source.name + " → " +
                        d.target.name + "\n" + format(d.value);
                });


            // add in the nodes
            var node = dataLr.append("g").selectAll(".node")
                .data(testData.nodes)
                .enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) {
                    //console.log(d);
                  //THESE PROPERTIES ARE NOT PRESENT IN THE SANKEY DATA:
                    return "translate(" + d.x + "," + d.y + ")";
                    //return "translate(" + 20 + "," + 50 + ")";
                });

[Dan DeLorenzo]

No solution for this now more than a month. Any one with any suggestions

[Kaveh Karimi-Asli]

I'm importing this library in a project using ES6 syntax as shown below and it works fine:

import { sankey, sankeyLinkHorizontal } from 'd3-sankey'

Here's the link to the code in my sample project:
https://github.com/Oregon2020/oregon2020/blob/master/src/components/Diagrams/Sankey.jsx

[Mike Bostock]

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗