问题描述
Tldr;当 Angular 将 this 绑定到类(组件/服务)时，如何处理引用 D3 对象的 this?
Tldr; How do I deal with this in reference to a D3 object when Angular binds this to the class (component/service)?
我希望在 Angular (v.4) 应用程序中使用 D3.js (v.4).
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.
this 的使用让我很不舒服.
The use of this is tripping me up.
我有一个想要拖动的 SVG 组，所以我使用 .call(drag)
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 元素时，我的问题就出现了.在我的原始代码中，我可以参考 this 例如let matrix = this.getCTM().在服务中使用此代码时，使用 this 现在不起作用.
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.
我不认为这只是与箭头函数 this 绑定为 .on('drag', function(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/
推荐答案
在大多数 D3 方法中，this 指的是 DOM 元素，它是获取元素最简单的方式.但是，您在角度代码中使用 this 时遇到了一些问题.
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.
好消息是，有一种惯用方法可以在不依赖this(也不依赖d3.event)的情况下获取当前的DOM元素code>):结合使用 second 和 third 参数.这在您无法使用 this 的情况下非常有用，例如您现在的情况或使用箭头函数时.
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.
this 的替代方案在 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[我]).(都强调我的)
... 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]) 是一个 selection，你必须使用 node() 来获得实际的 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=预览
Here is your updated plunker: https://plnkr.co/edit/tjQ6lV411vAUcEKPh0ru?p=preview
这篇关于如何在 D3 的 Angular 中使用“this"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2