Angular D3 - 如何在Element函数中引用Component的Variable

Question

我已经在我的SVG上附加了5 rect，并试图在每个元素中绑定mouseOver，这会在悬停时单独改变它们的颜色填充。

问题：
你如何在调用元素的函数中调用this.d3？

我试过了this.d3.select(this)但它当然会引用当前的Angular Component

我尝试了this.d3.select(this)，但this关键字引用了当前的Angular Component

如@yurzui所述，this不是指角度组件，而是指元素本身。

private d3: D3;

foo(): void {
    let x = 0;
    for (let i = 0; i < 5; i ++) {
        this.svg.append('rect')
        .attr('x', x)
        .attr('y', 100)
        .styles({
            'width' : 100,
            'height' : 100,
            'fill' : '#2196F3'
        })
        .on('mouseover', this.bar);

        x += 110;
    }
}

bar(d, i) {
    // Change the color of the hovered rect
    // this is referencing the current element
    // unable to call this.d3 since this is referencing the element
    this.d3.select(this)
    .attr('fill', 'red');
}