我对如何将 D3JS 与 angular 集成在一起的观点tutorial表示怀疑。一切都在圆弧上正常工作，并且显示了节点，但是我无法在圆弧中添加箭头标记。
为此，我在 GraphComponent
的marker内添加了svg tag定义
<svg #svg [attr.width]="_options.width" [attr.height]="_options.height">
<g [zoomableOf]="svg">
<g>
<g [pathVisual]="link" *ngFor="let link of links"></g>
</g>
<g>
<g [nodeVisual]="node" (click)="onNodeClick.emit(node)" *ngFor="let node of nodes"
[draggableNode]="node"
[draggableInGraph]="graph"></g>
</g>
</g>
<defs>
<marker id="suit" viewBox="0 -5 10 10" refX="25" refY="0" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,-5L10,0L0,5 L10,0 L0, -5" style="stroke: rgb(70, 121, 189); opacity: 0.6;"></path>
</marker>
</defs>
</svg>
在 PathVisualComponent 中，我添加了该html
<svg:path
class="link" [attr.marker-end]='"url(" +location.path()+ "#licensing)"'
[attr.d]='"M" + link.source.x + "," + link.source.y + "A" + (link.last? 0:1000/(link.linknum+link.linknum%2) )+ "," + (link.last? 0:1000/(link.linknum+link.linknum%2)) + " 0 0," + link.linknum%2 + " " + link.target.x + "," + link.target.y'
></svg:path>
我在此link中发现了一些东西，但似乎不起作用。我还为marker-end属性分配了完整的路径，例如marker-end=""url(localhost:4200/graph#suit)"，但是它没有用。我认为这是孩子父母scope的问题，但我无法解决。
非常感谢您。
更新
问题与样式中的id解析无关，而是箭头被节点隐藏了。我改用"marker-mid="url(#Arrow)"，现在有些弧形显示了箭头。
但是，我仍然有一些问题。如果路径简单明了，箭头不会显示。而且我想更改代码，以使箭头位于目标节点附近而不是中间。
.link {
stroke: #908f99;
fill: none;
stroke-width: 1.5px;
}<svg _ngcontent-c4="" width="960" height="600">
<g _ngcontent-c4="" ng-reflect-zoomable-of="[object SVGSVGElement]" transform="translate(199.1044468630611,13.40165954040507) scale(0.6434946236506354)">
<g _ngcontent-c4="">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M786.6689621109416,334.0903700852493A0,0 0 0,1 481.8402222763668,250.4242320228995"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 724.5675103969063,469.7009821957908"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 178.49984792979745,334.6305523604956"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A500,500 0 0,1 471.947192761928,-62.194922670440135"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A500,500 0 0,0 471.947192761928,-62.194922670440135"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A250,250 0 0,1 471.947192761928,-62.194922670440135"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A250,250 0 0,0 471.947192761928,-62.194922670440135"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 471.947192761928,-62.194922670440135"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 612.8369176619134,556.6698178977819"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 295.15424200208645,32.577559697993344"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 773.925554237546,172.6244055376865"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 480.3643574698452,584.5453952465887"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 236.7620466300937,469.7687155913336"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 663.7408559507716,27.196478969028984"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M481.8402222763668,250.4242320228995A0,0 0 0,1 186.2731092673845,174.3329420073489"></path>
</g><g _ngcontent-c4="" _nghost-c5="" ng-reflect-link="[object Object]"><path _ngcontent-c5="" class="link" marker-mid="url(#Arrow)" d="M347.42361681561664,555.1408191209484A0,0 0 0,1 481.8402222763668,250.4242320228995"></path>
</g>
</g>
<g _ngcontent-c4="">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(724.5675103969063,469.7009821957908)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(178.49984792979745,334.6305523604956)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(471.947192761928,-62.194922670440135)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(612.8369176619134,556.6698178977819)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(295.15424200208645,32.577559697993344)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(773.925554237546,172.6244055376865)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(480.3643574698452,584.5453952465887)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(786.6689621109416,334.0903700852493)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(481.8402222763668,250.4242320228995)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(236.7620466300937,469.7687155913336)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(663.7408559507716,27.196478969028984)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(347.42361681561664,555.1408191209484)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g><g _ngcontent-c4="" _nghost-c6="" ng-reflect-node="[object Object]" ng-reflect-draggable-node="[object Object]" ng-reflect-draggable-in-graph="[object Object]"><g _ngcontent-c6="" transform="translate(186.2731092673845,174.3329420073489)">
<circle _ngcontent-c6="" class="node" cx="0" cy="0" fill="#1f77b4" r="50">
</circle>
<!--bindings={
"ng-reflect-ng-if": null
}-->
</g></g>
</g>
</g>
<defs _ngcontent-c4="">
<marker _ngcontent-c4="" id="Arrow" markerHeight="10" markerWidth="15" orient="auto" refX="0" refY="10" viewBox="0 0 20 20">
<path _ngcontent-c4="" d="M 0 0 L 20 10 L 0 20"></path>
</marker>
</defs>
</svg>