查看具有完美同步的热图的树状图

Question

对于给定的链接 Codepen

var layout2 = {

yaxis: {
domain: [0, 0.7],
mirror: false,
showgrid: false,
showline: false,
zeroline: false,
showticklabels: true,
ticks: "",
ticktext: ["n", "o", "p", "j", "q", "l", "k", "m", "r"],
tickvals: [-5.0, -15.0, -25.0, -35.0, -45.0, -55.0, -65.0,-75.0,-85.0]},

xaxis: {
domain: [0, 0.7],
mirror: false,
showgrid: false,
showline: false,
zeroline: false,
showticklabels: true,
ticks: "",
ticktext: ["n", "o", "p", "j", "q", "l", "k", "m", "r"],
tickvals: [5.0, 15.0, 25.0, 35.0, 45.0, 55.0, 65.0, 75.0, 85.0]
},

xaxis2: {
domain: [0.75, 1],
mirror: false,
showgrid: false,
showline: false,
zeroline: false,
showticklabels: false,
ticks: "",
ticktext: ["n", "o", "p", "j", "q", "l", "k", "m", "r"]
},

yaxis2: {
domain: [0.75, 1],
mirror: false,
showgrid: false,
showline: false,
zeroline: false,
showticklabels: false,
ticks: "",
ticktext: ["n", "o", "p", "j", "q", "l", "k", "m", "r"]
},
showlegend: false,
margin: { l: 30, r: 30, b: 30, t: 30 }};

data = dendrogramUP["data"];
data = data.concat(dendrogramRIGHT["data"]);

trace4["x"] = dendrogramUP["layout"]["xaxis"]["tickvals"];
trace4["y"] = dendrogramRIGHT["layout"]["yaxis"]["tickvals"];
data = data.concat(trace4);

Plotly.newPlot("myDiv", data, layout2);

我正在尝试在顶部（顶部向下）获取热图和树状图。忽略右侧树状图。 热图的Y轴应包含9个项目，而X轴应包含5个项目，并相应地绘制热图。

问题在于您可以看到dendrogramUp与热图未正确对齐，并且我不确定dendrogramUp数据是否正确，请告诉我们如何进行调试或只是解决问题。我相信变量布局2需要一些修补。