创建扩展的D3 Sankey图

Question

我正在尝试创建类似于此链接的D3 Sankey： https://ire.uncg.edu/research/Air-2017-Mark-Davenport/web_index_app.html

然而，我正在坚持使矩形扩展。

代码是否与此类似（下面的链接）或我应该尝试不同的东西？如果它是相似的，我有几个问题。 Collapsible Sankey Diagram - D3

不确定我的代码是否对我目前所拥有的内容有所帮助，并且我了解如何在不同方向上移动节点。 仍在学习D3的来龙去脉，我感谢所有的提示/帮助。

        var units = "Units";

        var margin = { top: 10, right: 10, bottom: 10, left: 10 },
            width = 1400 - margin.left - margin.right,
            height = 740 - margin.top - margin.bottom;

        var formatNumber = d3.format(",.0f"),    // zero decimal places
            format = function (d) { return formatNumber(d) + " " + units; },
            color = d3.scale.category20();

        // append the svg canvas to the page
        var svg = d3.select("#chart").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

        // Set the sankey diagram properties
        var sankey = d3.sankey()
            .nodeWidth(36)
            .nodePadding(10)
            .size([width, height]);

        var path = sankey.link();

        // load the data with d3.csv 
        d3.csv("testingsankey.csv", function (error, data) {
            //set up graph in same style as original example but empty
            graph = { "nodes": [], "links": [] };

            data.forEach(function (d) {
                graph.nodes.push({ "name": d.source });
                graph.nodes.push({ "name": d.target });

                graph.links.push({ "source": d.source, "target": d.target, "value": +d.value });
            });


            graph.nodes = d3.keys(d3.nest()
                     .key(function (d) { return d.name; })
                     .map(graph.nodes));

            //it appears d3 with force layout wants a numeric source and target
            //so loop through each link replacing the text with its index from node
            graph.links.forEach(function (d, i) {
                graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
                graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
            });

            //now loop through each nodes to make nodes an array of objects rather than an array of strings
            graph.nodes.forEach(function (d, i) {
                graph.nodes[i] = { "name": d };
            });

            sankey
                .nodes(graph.nodes)
                .links(graph.links)
                .layout(32);

            // add in the links
            var link = svg.append("g").selectAll(".link")
                .data(graph.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) {
                      return d.source.name + " → " +
                              d.target.name + "\n" + format(d.value);
                  });

            // add in the nodes
            var node = svg.append("g").selectAll(".node")
                .data(graph.nodes)
              .enter().append("g")
                .attr("class", "node")
                .attr("transform", function (d) {
                    return "translate(" + d.x + "," + d.y + ")"; 
                })

           .call(d3.behavior.drag()
                .origin(function (d) { return d; })
                .on("dragstart", function () {
                    this.parentNode.appendChild(this);
                })
                .on("drag", dragmove));


            node.append("rect")
                .attr("height", function (d) { return d.dy; })
                .attr("width", sankey.nodeWidth())
                .style("fill", function (d) {
                    return d.color = color(d.name.replace(/ .*/, ""));
                })
                .style("stroke", function (d) {
                    return d3.rgb(d.color).darker(2);
                })
              .append("title")
                .text(function (d) {
                    return d.name + "\n" + format(d.value);
                });

            // add in the title for the nodes
            node.append("text")
                .attr("x", -6)
                .attr("y", function (d) { return d.dy / 2; })
                .attr("dy", ".35em")
                .attr("text-anchor", "end")
                .attr("transform", null)
                .text(function (d) { return d.name; })
              .filter(function (d) { return d.x < width / 2; })
                .attr("x", 6 + sankey.nodeWidth())
                .attr("text-anchor", "start");


            // the function for moving the nodes
            function dragmove(d) {
                d3.select(this).attr("transform",
                    "translate(" + (
                           d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
                        ) + "," + (
                               d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
                        ) + ")");
                sankey.relayout();
                link.attr("d", path);
            }
        });