Javascript Sankey图表-如何使用Amchart或任何其他JS库分别控制节点的宽度和位置

我正在使用一个图表实现，我面临两个问题

• 首先，每个节点需要有不同的宽度，目前使用Amcharts，您只能同时调整所有节点的宽度

• 第二个问题是，我需要根据时间因素稍微推动第一层中的一些节点，但使用Am图表，一层中的所有节点都从同一个X点开始

我愿意使用任何其他JS库或其他技术来达到同样的效果

注意：如果从0开始调整级别，则只有一个级别1的节点需要调整。

//主题开始
am4core.useTheme（am4themes_-dark）；
am4core.useTheme（am4themes_动画）；
//主题结束
var chart=am4core.create（“chartdiv”，am4charts.sankeydraph）；
chart.hiddenState.properties.opacity=0；//这将创建初始淡入
chart.data=[
{从“A”到“E”，值：1，id:“A0-0”}，
{从“A”到“F”，值：1，id:“A1-0”}，
{从“A”到“G”，值：1，id:“A2-0”}，
{从“B”到“E”，值：1，id:“B0-0”}，
{从“B”到“F”，值：1，id:“B1-0”}，
{从“B”到“G”，值：1，id:“B2-0”}，
{从“C”到“F”，值：1，id:“C0-0”}，
{从“C”到“G”，值：1，id:“C1-0”}，
{从“C”到“H”，值：1，id:“C2-0”}，
{从“D”到“E”，值：1，id:“D0-0”}，
{从“D”到“F”，值：1，id:“D1-0”}，
{从：“D”到“G”，值：1，id:“D2-0”}，
{从“D”到“H”，值：1，id:“D3-0”}，
{从“E”到“I”，值：1，id:“A0-1”}，
{从“E”到“I”，值：1，id:“B0-1”}，
{从“E”到“L”，值：1，id:“D0-1”}，
{从“F”到“I”，值：1，id:“A1-1”}，
{从“F”到“I”，值：1，id:“C0-1”}，
{从“F”到“I”，值：1，id:“D1-1”}，
{从“F”到“M”，值：1，id:“B1-1”}，
{从“G”到“I”，值：1，id:“A2-1”}，
{从“G”到“I”，值：1，id:“B2-1”}，
{从“G”到“J”，值：1，id:“C1-1”}，
{从“G”到“N”，值：1，id:“D2-1”}，
{从“H”到“K”，值：1，id:“C2-1”}，
{从“H”到“N”，值：1，id:“D3-1”}，
{从“I”到“O”，值：1，id:“A0-2”}，
{从“I”到“O”，值：1，id:“B2-2”}，
{从“I”到“Q”，值：1，id:“A1-2”}，
{从“I”到“R”，值：1，id:“A2-2”}，
{从“I”到“S”，值：1，id:“D1-2”}，
{从：“I”到“T”，值：1，id:“B0-2”}，
{从：“I”到“Q”，值：1，id:“C0-2”}，
{从：“J”到“U”，值：1，id:“C1-2”}，
{从“K”到“V”，值：1，id:“C2-2”}，
{从：“M”到“U”，值：1，id:“B1-2”}，
{从：“N”到“Q”，值：1，id:“D2-2”}，
{从：“N”到“Q”，值：1，id:“D3-2”}，
{从：“L”到“W”，值：1，id:“D0-2”}
];
让hoverState=chart.links.template.states.create（“悬停”）；
hoverState.properties.fillOpacity=0.6；
chart.dataFields.fromName=“from”；
chart.dataFields.toName=“to”；
chart.dataFields.value=“value”；
chart.links.template.propertyFields.id=“id”；
chart.links.template.colorMode=“solid”；
chart.links.template.fill=新的am4core.InterfaceColorSet（）.getFor（“alternativeBackground”）；
chart.links.template.fillOpacity=0.1；
chart.links.template.tooltipText=“”；
//突出显示具有相同id开头的所有链接
chart.links.template.events.on（“结束”，函数（事件）{
让link=event.target；
设id=link.id.split（“-”[0]；
图表.链接.每个功能（链接）{
if（link.id.indexOf（id）！=-1）{
link.isHover=true；
}
})
})
chart.links.template.events.on（“out”，函数（事件）{
图表.链接.每个功能（链接）{
link.isHover=false；
})
})
//最右边的标签是否合适
chart.paddingRight=30；
//使节点可拖动
var nodeTemplate=chart.nodes.template；
nodeTemplate.惰性=真；
nodeTemplate.readerTitle=“拖动我！”；
nodeTemplate.showSystemTooltip=true；
nodeTemplate.width=20；
//使节点可拖动
var nodeTemplate=chart.nodes.template；
nodeTemplate.readerTitle=“单击以显示/隐藏或拖动以重新排列”；
nodeTemplate.showSystemTooltip=true；
nodeTemplate.cursorOverStyle=am4core.MouseCursorStyle.pointer

正文{
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”；
}
正文{背景色：#30303d；颜色：#fff；}
#沙特迪夫{
宽度：100%；
高度：500px
}