ng-bootstrap有一些非常直接的文档,显示了如何在元素上运行手动方法。在下面的代码块中,单击按钮会打开一个工具提示。
<button
type="button"
class="btn btn-outline-secondary mr-2"
ngbTooltip="What a great tip!"
[autoClose]="false"
triggers="manual"
#t="ngbTooltip"
(click)="t.open()"
>
Click me to open a tooltip
</button>
我想做的就是使用D3将这些属性动态添加到元素中,我可以做到,除了:
#t="ngbTooltip"
这会引发错误:
ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '\#t' is not a valid attribute name.
我真正想要执行的操作是这样的,以便可以手动调用open()方法:
this.paths = this.graph.selectAll("path").data(this.pie(data));
// update new paths
this.paths
.enter()
.append("path")
.attr("class", "arc")
.attr("stroke", "#fff")
.attr("stroke-width", 3)
.attr("fill", (d: any) => this.color(d.data.name))
.attr("ngbTooltip", "Tip Me!")
.attr("#t", "ngbTooltip") <== Here!
.attr("onmouseover", "t.open()")
.attr("placement", "top")
.each(function(d: object, i: number, n: object) {
this._current = d;
})
.transition(this.t)
.attrTween("d", this.arcTweenEnter);