Javascript d3为单词对齐可视化绘制水平二分图

我正在尝试编写一个脚本，从一个单词对齐文件生成以下可视化结果，它将包含1-11-2-5 3-3等。，

---

我发现了，但不知道如何使它成为水平的二部图而不是垂直的。我是d3新手，所以任何关于如何实现这一点的建议都将非常好。

我已经用d3创建了一个可视化示例；可能对您的目的有所帮助：

正文： 假设：

函数highlightetities实体，blockID，yCoordinate{ entities.forEachfunctionitem，i{ var offset=document.getElementByIdblockID.getStartPositionOfCharNumberitem[1][0].x； var width=document.getElementByIdblockID.getStartPositionOfCharNumberitem[1][1].x-偏移量； d3.selectsvg.appendrect.attrx，偏移量。 属性，协调。 宽度，宽度。 身高28。 黄色的。 attropacity，0.3.attrstroke-width，0.5.attrstroke，红色； }; } var text=Ed O'Kelley就是开枪打死Jesse James的人。； var hyp=Ed O'Kelley是个好人。； var textY=0； var-hypY=10； d3.选择SVG-text.texttext； d3.选择SVG-hyp.texthyp； var textEntities=[ [T1'，[0,11]]， [T2'，[20,23]]， [T3'，[37,40]]， ]; var hypEntities=[ [H1'，[0,11]]， [H2'，[18,22]]， [H3'，[23,26]]， ]; Highlightetitiestextenties，svg文本，5； HighlightTitieshypentities，svg hyp，122； //创建从实体到实体id的映射 var entityToIdMap={}； 函数加法运算{ Array.fromentities.forEachfunction项{ console.logitem； 如果entityToIdMap[项目[0]]==null{ entityToIdMap[项目[0]]=项目[1]； } 否则{ console.errorERROR:实体ID重复！可能重复信息； } }; } 对扩展的补充； 附录至附录； var关系=[ ['R1'，'T2'，'H1']， ['R2'，'T1'，'H2']， [R3'，T3'，H3']， ]; //此函数定义边的曲线 功能位置LinkX1、y1、x2、y2{ 返回M+x1+，+y1 +S+x1+x2/2+，+y1+y2/2 ++x2+，+y2； } //获取边起点的x-y坐标 var yOffset=9； 关系.forEachfunctionitem{ var entity1Loc=entityToIdMap[项目[1]]； var entity2Loc=entityToIdMap[项目[2]]； var blockID='svg text'； var x1=document.getElementByIdblockID.getStartPositionOfCharNumberentity1Loc[0].x+ document.getElementByIdblockID.getStartPositionOfCharNumberentity1Loc[1].x/2； 变量y1=document.getElementByIdblockID.getStartPositionOfCharNumberentity1Loc[0]。y+yOffset； blockID='svg hyp'； var x2=document.getElementByIdblockID.getStartPositionOfCharNumberentity2Loc[0].x+ document.getElementByIdblockID.getStartPositionOfCharNumberentity2Loc[1].x/2； var y2=document.getElementByIdblockID.getStartPositionOfCharNumberentity2Loc[0].y-yOffset-8； d3.选择svg.appendpath.attrd，位置链接X1、y1、x2、y2。 红色。 笔画宽度2； }; 以下是一个屏幕截图：

---

将链接到的文件放在水平位置。这是我能想到的最简单的水平复制图形的方法。我认为最好是垂直显示…主要原因是当数据太大时，你可以有一个垂直滚动。垂直滚动的问题是，我可能有很长的句子，然后它会变得乏味。通过水平滚动，我可以将文本包装成一个段落，然后显示它们之间的对齐。