svg: стрелка маркера не всегда отображается - PullRequest
0 голосов
/ 30 сентября 2019

Я использую компонент графика SVG в Angular, который отображает узлы со связями между ними. В конце ссылка имеет стрелку. Это прекрасно работает. Однако, если я создаю два или более экземпляров компонента графика, стрелки появляются только на первом графике.

Если посмотреть на синтаксис html, на всех графиках есть шаблоны стрелок и путей. Я подумал, может быть, это связано с тем, что стрелкам нужны уникальные идентификаторы, а при создании нескольких экземпляров существует много маркеров стрелок с одинаковым идентификатором.

Итак, я попытался сделать динамический идентификатор с помощью Angular, однако в этом случае стрелка не отображалась, хотя id и end-маркера находятся в html. Код показывает, как отображается график.

Есть идеи, почему стрелки появляются только в первом экземпляре графика?

    <ngx-graph [links]="links" [nodes]="nodes">
                <ng-template #nodeTemplate let-node>
                <svg:g class="node"></svg:g>
            </ng-template>

            <ng-template #linkTemplate let-link>
                <svg:g class="edge">
                    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
                        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                    </svg:marker>  
<svg:path [attr.marker-end]="url(#arrow)">
                </svg:path>                  
                </svg:g>
            </ng-template>
    </ngx-graph>

Вот код с динамическими идентификаторами, идентификаторыпечатаются правильно в дереве dom, но в этом случае ни одна стрелка не отображается:

<ng-template #linkTemplate let-link>
            <svg:g class="edge">
                <svg:marker id="{{link.id}}" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4"
                    orient="auto">
                    <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                </svg:marker>                   
                 <svg:path [attr.marker-end]="'url(#'+ link.id +')'">
                </svg:path>                    
            </svg:g>
        </ng-template>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...