d3-sankey按组显示和拖动不起作用

问题描述

在我的项目中，我使用d3.js版本6.2.0和d3-sankey版本0.12.3绘制了sankey图。结果在以下屏幕截图中。

在源文件中，我有一些分组

{
  "nodes": [
    {
      "group_nodes": "1st line","name": "CL","id": 0
    },{
      "group_nodes": "2nd line","name": "COMT,CL,DA","id": 9
    },{
      "group_nodes": "3rd line","name": "COMT","id": 39
    }
  ],"links": [
  ]
}

我想要实现的是将每个组对齐到一列。例如，所有第1组在左边，第2组在图表中间，第3组在右边。

function DrawSankey() {
    d3.json("../data.json").then(function (sankeydata) {
        graph = sankey(sankeydata);

        // add in the links
        var link = svg.append('g').selectAll('.link')
            .data(graph.links)
            .enter().append('path')
            .attr('class','link')
            .attr("d",d3.sankeyLinkHorizontal())
            .style('stroke-width',5)  // d => Math.max(10,d.dy)
            .style('fill','none')
            .style('stroke-opacity',0.4)
            .sort((a,b) => b.dy - a.dy)
            .on('mouSEOver',function () {
                d3.select(this).style('stroke-opacity',0.6);
            })
            .on('mouSEOut',0.4);
            });

        // 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.drag()
                .subject(function (d) {
                    return d;
                })
                .on('start',function (event,d) {
                    this.parentNode.appendChild(this)
                })
                .on("drag",dragmove));

        // add the rectangles for the nodes
        node.append("rect")
            .attr("x",function (d) { return d.x0; })
            .attr("y",function (d) { return d.y0; })
            .attr("height",function (d) { return d.y1 - d.y0; })
            .attr("width",sankey.nodeWidth())
            .style("fill",function (d) {
                return d.color = color(d.name.replace(/ .*/,""));
            })
            .attr("stroke","#000")
            .append("title")
            .text(function (d) {
                return d.name + "\n" + format(d.value);
            });

        // add in the title for the nodes
        node.append("text")
            .attr("x",function (d) { return d.x0 - 6; })
            .attr("y",function (d) { return (d.y1 + d.y0) / 2; })
            .attr("dy","0.35em")
            .attr("text-anchor","end")
            .text(function (d) { return d.name; })
            .filter(function (d) { return d.x0 < width / 2; })
            .attr("x",function (d) { return d.x1 + 6; })
            .attr("text-anchor","start");

        // add gradient to links
        link.style('stroke',(d,i) => {
            // make unique gradient ids
            const gradientID = `gradient${i}`;

            const startColor = d.source.color;
            const stopColor = d.target.color;

            console.log('startColor',startColor);
            console.log('stopColor',stopColor);

            const linearGradient = defs.append('linearGradient')
                .attr('id',gradientID);

            linearGradient.selectAll('stop')
                .data([
                    { offset: '25%',color: startColor },{ offset: '75%',color: stopColor }
                ])
                .enter().append('stop')
                .attr('offset',d => {
                    console.log('d.offset',d.offset);
                    return d.offset;
                })
                .attr('stop-color',d => {
                    console.log('d.color',d.color);
                    return d.color;
                });

            return `url(#${gradientID})`;
        })
    })

    function dragmove(d) {
        d3.select(this)
            .attr("transform","translate("
                + d.x + ","
                + (d.y = Math.max(
                    0,Math.min(height - d.dy,event.y))
                ) + ")");
        sankey.update(graph);
    }
}

此外，拖动条时出现问题。如下面的屏幕快照所示，当我移动一个栏时，它与线条没有连接，并且栏消失了。

解决方法

我知道这是一个很晚的回复，但以防万一其他人偶然发现这个问题，您可以使用 .nodeAlign()

所以在上面的例子中：

  "nodes": [
    {
      "group_nodes": 0,"name": "CL","id": 0
    },{
      "group_nodes": 1,"name": "COMT,CL,DA","id": 9
    },{
      "group_nodes": 2,"name": "COMT","id": 39
    }
  ],"links": [
  ]

使用零索引组，您可以使用：

.nodeAlign((d) => d.group_nodes)