Javascript d3按组和拖动方式显示sankey'；行不通

在我的项目中，我用

d3.js

version6.2.0和

d3sankey

version0.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。

函数DrawSankey（）{
d3.json（“../data.json”）。然后（函数（sankeydata）{
图形=sankey（sankeydata）；
//添加链接
var link=svg.append（'g'）。selectAll（'.link'））
.数据（图表.链接）
.enter（）.append（'path'）
.attr（'class'，'link'）
.attr（“d”，d3.sankeyLinkHorizontal（））
.style（'stroke-width'，5）//d=>Math.max（10，d.dy）
.style（'填充'，'无'）
.style（'stroke-opacity'，0.4）
.sort（（a，b）=>b.dy-a.dy）
.on（'mouseover'，函数（）{
d3.选择（此）.style（'stroke-opacity'，0.6）；
})
.on（'mouseout'，函数（）{
d3.选择（此）.style（'stroke-opacity'，0.4）；
});
//添加链接标题
链接。附加（“标题”）
.文本（功能（d）{
返回d.source.name+”→ " +
d、 target.name+“\n”+格式（d.value）；
});
//添加节点
var node=svg.append（“g”）.selectAll（“node”）
.数据（图.节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
})
.call（d3.drag（）
.主题（功能（d）{
返回d；
})
.on（'start'，函数（事件，d）{
this.parentNode.appendChild（this）
})
.在（“拖动”，拖动）上）；
//为节点添加矩形
node.append（“rect”）
.attr（“x”，函数（d）{return d.x0；}）
.attr（“y”，函数（d）{返回d.y0；}）
.attr（“高度”，函数（d）{返回d.y1-d.y0；}）
.attr（“宽度”，sankey.nodeWidth（））
.样式（“填充”，功能（d）{
返回d.color=color（d.name.replace（/.*/，“”））；
})
.attr（“笔划”，“千”）
.附加（“标题”）
.文本（功能（d）{
返回d.name+“\n”+格式（d.value）；
});
//添加节点的标题
node.append（“文本”）
.attr（“x”，函数（d）{返回d.x0-6；}）
.attr（“y”，函数（d）{return（d.y1+d.y0）/2；}）
.attr（“dy”，“0.35em”）
.attr（“文本锚定”、“结束”）
.text（函数（d）{返回d.name；}）
.filter（函数（d）{返回d.x0{
//生成唯一的梯度ID
const gradientID=`gradient${i}`；
常量startColor=d.source.color；
const stopColor=d.target.color；
console.log（'startColor'，startColor）；
console.log（'stopColor'，stopColor）；
常量linearGradient=defs.append（'linearGradient'）
.attr（'id'，gradientID）；
linearGradient.selectAll（'stop'）
.数据([
{偏移量：“25%”，颜色：startColor}，
{偏移量：“75%”，颜色：stopColor}
])
.enter（）.append（'stop'）
.attr（'offset'，d=>{
控制台日志（'d.offset'，d.offset）；
返回d.offset；
})
.attr（'stop-color'，d=>{
console.log（'d.color'，d.color）；
返回d.color；
});
返回'url（#${gradientID}）`；
})
})
功能拖动（d）{
d3.选择（本）
.attr（“转换”，
“翻译（”
+d.x+“，”
+（d.y=Math.max(
0，Math.min（高度-d.dy，event.y））
) + ")");
sankey.update（图形）；
}
}

另外，当我拖动一个条时，我遇到了一个问题。正如你在下面的屏幕截图中看到的，当我移动一个条时，它与线条没有连接，条消失了

---

我知道这是一个很晚的答复，但为了防止其他人偶然发现这个问题，您可以使用

在上面的例子中：

  "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)

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