如何在角度与D3中使用'this'？ [英] How to use 'this' in Angular with D3?

问题描述

Tldr;当Angular将此绑定到类（组件/服务）时，如何处理此以引用D3对象？

Tldr; How do I deal with this in reference to a D3 object when Angular binds this to the class (component/service)?

我希望在Angular中使用D3.js（v.4）（v。 4）app。

I am looking to use D3.js (v.4) in an Angular (v.4) app.

我的代码在独立的JavaScript中运行，但我现在需要将它集成到Angular应用程序中。

My code works in standalone JavaScript but I now need to integrate it into an Angular app.

使用这个让我沮丧。

我有一个我希望拖动的SVG组所以我使用 .call（拖动）

I have an SVG group that I wish to drag and so I use .call(drag)

someFunction() {
    this.unitGroup = this.svg.append('g')
            .attr('id', 'unitGroup');
            .call(drag)

}

我的问题来了当我尝试引用被拖动的svg元素时。在我的原始代码中，我可以参考此，例如 let matrix = this.getCTM（）。在服务中使用此代码时，使用此现在无效。

My problem comes about when I try to reference the svg element that is being dragged. In my original code, I could refer to this e.g. let matrix = this.getCTM(). Using this is now not working when using this code within a service.

drag = d3.drag()
    .on('start', () => {
        this.setClickOrigin(d3.event);
    })
    .on('drag', (d) => {
        const m = this.getCTM(); // <--- PROBLEM HERE
        const x = d3.event.x - this.clickOrigin.x;
        const y = d3.event.y - this.clickOrigin.y;
        this.setClickOrigin(d3.event);
        d3.select(this) // <--- PROBLEM HERE
            .attr('transform', `matrix(${m.a},${m.b},${m.c},${m.d},${m.e + x},${m.f + y})`);
    });

任何关于如何实现这一点或澄清我做错的指示都将不胜感激。

Any pointers on how to implement this or clarification of what I am doing wrong would be appreciated.

我不认为这只是与箭头函数相关的错误绑定为 .on（'拖'，函数（d）{...} 会导致相同的错误。

I don't think this is simply an error associated with the arrow function this binding as .on('drag', function(d){...} results in the same error.

以下是Plunker说明我的问题： https://embed.plnkr.co/p1hdhMBnaebVPB6EuDdj/

Here is Plunker illustrating my issue: https://embed.plnkr.co/p1hdhMBnaebVPB6EuDdj/

推荐答案

在大多数D3方法中，这个是指DOM元素，它是获取元素的最简单方法。但是，你使用这个在你的角度代码中。

In most of D3 methods, this refers to the DOM element, and it is the most simple way to get the element. However, you're facing some problems using this in your angular code.

好消息是有一种惯用的方式来获取当前的DOM元素依赖这个（并且不依赖于 d3.eve nt 以及：使用第二个和第三个​​参数组合在一起。这在您无法使用此的情况下非常有用，例如您现在的状况或使用箭头功能时。

The good news is that there is an idiomatic way to get the current DOM element without relying on this (and without relying on d3.event as well): using the second and the third arguments combined. This is quite useful in situations where you cannot use this, like your situation right now or when using an arrow function, for instance.

API中广泛记录了此的替代方案。对于大多数D3方法，你可以读到方法是......

That alternative to this is extensively documented on the API. For most D3 methods, you can read that the method is...

...传递当前数据（d），当前索引（i）和当前组（节点）， this 作为当前DOM元素（ nodes [i] ）。 （两者都强调我的）

... being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). (both emphases mine)

因此，在常见的D3代码中，您可以使用以下方式获取DOM元素：

So, in a common D3 code, you can get the DOM element using:

.on("whatever", function(){
    d3.select(this).etc...
//              ^--- 'this' is the DOM element

或者：

.on("whatever", function(d,i,n){
//                         ^-^--- second and third arguments
    d3.select(n[i]).etc...
//              ^--- here, 'n[i]' is also the DOM element

因此，在您的情况下，只需使用：

Therefore, in your case, just use:

.on('drag', (d,i,n) => {
    const m = d3.select(n[i]).node().getCTM();
//the same of 'this'-----^
...
}

由于 d3.select（n [i]）是选择，您必须使用节点（）获取实际的DOM元素。

Since d3.select(n[i]) is a selection, you'll have to use node() to get the actual DOM element.

这是你更新的plunker： https://plnkr.co/edit/tjQ6lV411vAUcEKPh0ru?p=preview

Here is your updated plunker: https://plnkr.co/edit/tjQ6lV411vAUcEKPh0ru?p=preview

这篇关于如何在角度与D3中使用'this'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！