spaCy displaCy ( https://github.com/explosion/spaCy/blob/master/website/UNIVERSE.md ) からの次の変更されたコードを使用して、表示したい関係を強調するために、上とテキストに矢印を表示しようとしています.
コードのこの部分では、「矢印レンダリング関数」を呼び出しています。
arcs_svg = [
self.render_arrow(self, a["start" ], a["end"], a["dir"], x ,b)
for x, a in enumerate(arcs) if a["start"] <= b and a["end"] >= c or a["end"] <= b and a["start"] >= c
]
これを b = 4 で与えます。
[{'start': 0, 'end': 1 , "dir": "left"}, {'start': 0, 'end': 3, "dir": "left"}, {'start': 0, 'end': 5, "dir": "left"},{'start': 0, 'end': 7, "dir": "left"}]
これにより、次のコードが実行されます。
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},{c} {e},{a}"
return template.format(x=x_start, y=y_start, c=y_curve, e=x_end, a=y_end)
出力は、テキスト行の上にある画像です (HTML として、コードの別の場所で作成されます)。しかし、下のテキスト行の単語との接続を確立できません。y_end / y_star + 50 を参照してください。画像がテキスト行で切り取られているように見えます
これどうやってするの？svg にテキストを追加する必要がありますか? それとも、このアプローチは私が達成したいことには適していませんか?また、まったく別のアプローチが必要ですか?
HTML svg 部分は次のとおりです。
<!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,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,77.0 22,48.875 235.0,48.875 235.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-2" stroke-width="2px" d="M22,77.0 22,30.125 385.0,30.125 385.0,127.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-3" stroke-width="2px" d="M22,77.0 22,11.375 535.0,11.375 535.0,127.0" fill="none" stroke="currentColor"/>
<path class="displacy-arrowhead" d="M22,79.0 L18,71.0 26,71.0" fill="currentColor"/>
</g>
</svg>
</figure>
</body>
</html>