问题描述
使用以下来自 spaCy displaCy (https://github.com/explosion/spaCy/blob/master/website/UNIVERSE.md) 的修改代码 我试图在顶部和文本中使用箭头来强调我想要显示的关系。
[{'start': 0,'end': 1,"dir": "left"},{'start': 0,'end': 3,'end': 5,'end': 7,"dir": "left"}]
我给它 b = 4。
def render_arrow(self,label: str,start: int,end: int,direction: str,i: int,c:int) -> str:
"""Render individual arrow.
label (str): Dependency label.
start (int): Index of start word.
end (int): Index of end word.
direction (str): Arrow direction,'left' or 'right'.
i (int): Unique ID,typically arrow index.
RETURNS (str): Rendered SVG markup.
"""
a = 0
level = self.levels.index(end - start) + 1
x_start = self.offset_x + (start-a) * self.distance + self.arrow_spacing
if start > c:
y_start = self.offset_y + 50
else:
y_start = self.offset_y
if end > c:
y_end = self.offset_y + 50
else:
y_end = self.offset_y
x_end = (self.offset_x + (((end-a) - (start-a)) * self.distance / 2) + (start-a) * self.distance
)
y_curve = self.offset_y - level * self.distance / 16
if y_curve == 0 and len(self.levels) > 5:
y_curve = -self.distance
if direction == "left":
y = y_start
else:
y = y_end
arrowhead = self.get_arrowhead(direction,x_start,y,x_end)
arc = self.get_arc(x_start,y_start,y_curve,x_end,y_end)
a = c
return self.arcs_template.format(
id=self.id,i=i,stroke=self.arrow_stroke,head=arrowhead,arc=arc,)
def get_arc(self,x_start: int,y_start: int,y_curve: int,x_end: int,y_end: int) -> str:
"""Render individual arc.
x_start (int): X-coordinate of arrow start point.
y (int): Y-coordinate of arrow start and end point.
y_curve (int): Y-corrdinate of Cubic Bézier y_curve point.
x_end (int): X-coordinate of arrow end point.
RETURNS (str): DeFinition of the arc path ('d' attribute).
"""
template = "M{x},{y} {x},{c} {e},{a}"
return template.format(x=x_start,y=y_start,c=y_curve,e=x_end,a=y_end)
运行以下代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<title>displaCy</title>
</head>
<body style="font-size: 16px; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; padding: 4rem 2rem; direction: ltr">
<figure style="margin-bottom: 6rem">
<div class="entities" style="line-height: 2.5; direction: ltr">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="nl" id="3164cb9bab2c4f53aad0c15deab13184-0" class="displacy" width="90310" height="78.0" direction="ltr" style="max-width: none; height: 78.0px; color: #aa9cfc; background: #ffffff; font-family: Arial; direction: ltr">
<g class="displacy-arrow">
<path class="displacy-arc" id="arrow-3164cb9bab2c4f53aad0c15deab13184-0-0" stroke-width="2px" d="M22,77.0 22,67.625 85.0,77.0" fill="none" stroke="currentColor"/>
<path class="displacy-arrowhead" d="M22,79.0 L18,71.0 26,71.0" fill="currentColor"/>
</g>
<g class="displacy-arrow">
<path class="displacy-arc" id="arrow-3164cb9bab2c4f53aad0c15deab13184-0-1" stroke-width="2px" d="M22,48.875 235.0,71.0" fill="currentColor"/>
</g>
<g class="displacy-arrow">
<path class="displacy-arc" id="arrow-3164cb9bab2c4f53aad0c15deab13184-0-2" stroke-width="2px" d="M22,30.125 385.0,127.0" fill="none" stroke="currentColor"/>
<path class="displacy-arrowhead" d="M22,71.0" fill="currentColor"/>
</g>
<g class="displacy-arrow">
<path class="displacy-arc" id="arrow-3164cb9bab2c4f53aad0c15deab13184-0-3" stroke-width="2px" d="M22,11.375 535.0,71.0" fill="currentColor"/>
</g>
</svg>
</figure>
</body>
</html>
输出现在是文本行上方的图像（作为 html，在代码中的其他地方创建）。但是我无法与较低文本行中的单词建立联系。查看 y_end / y_star + 50。看起来好像图像被文本行剪切了
我该怎么做？我需要在 svg 中添加文本吗？ 还是这种方法不适合我想要实现的目标，我是否需要另一种方法？
这里是 HTML svg 部分：
{{1}}解决方法
我已将其全部删除并使用 pyvis。
它能够修复节点并将它们显示为文本。以px为单位的字长我可以安排位置。