1

使用 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>
4

1 回答 1

0

我已将其全部删除并使用了pyvis。

它能够修复节点并将它们显示为文本。以 px 为单位的字长,我可以安排位置。

于 2021-04-27T17:55:08.087 回答