我想在两个节点之间的边缘上使用ngx-tooltip
。 ntx-tooltip
的作品可以同时找到边缘和节点,只是边缘要小得多,因此必须准确定位鼠标以触发工具提示弹出窗口。
<ng-template #linkTemplate let-link>
<svg:g class="edge"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'popover'"
[tooltipTitle]="link.direction"
>
<ng-container [ngSwitch]="link.direction">
<svg:path
*ngSwitchCase="'ToFrom'"
[ngStyle]="pathStyle(link.source, link.target, link.direction)"
class="line"
stroke-width="3"
marker-start="url(#arrow)"
marker-end="url(#arrow)"
>
</svg:path>
<svg:path
*ngSwitchCase="'FromOnly'"
[ngStyle]="pathStyle(link.source, link.target, link.direction)"
class="line"
stroke-width="3"
marker-start="url(#EndMarker)"
marker-end="url(#arrow)"
>
</svg:path>
<svg:path
*ngSwitchCase="'ToOnly'"
[ngStyle]="pathStyle(link.source, link.target, link.direction)"
class="line"
stroke-width="3"
marker-start="url(#arrow)"
marker-end="url(#EndMarker)"
>
</svg:path>
</ng-container>
<svg:text class="edge-label" text-anchor="middle">
<svg:textPath class="text-path" [attr.href]="'#' + link.id"
[style.dominant-baseline]="link.dominantBaseline" startOffset="50%"
>
{{link.label}}
</svg:textPath>
</svg:text>
</svg:g>
</ng-template>
答案 0 :(得分:0)
我会在模板中添加一条不可见的线,以使鼠标悬停区域变粗:
size1
然后像这样设置它的样式(使笔触厚12px,并且不可见):
SUM(product_count+product_count2) AS product_count, size1 FROM