Javascript d3js：带对象上下文的鼠标悬停（函数指针）

我试图用JavaScript编写一个

Graph

类，我想用它作为我网站上进一步图形的基础。我的问题是mousedown处理程序：

类的

图
构造函数添加了mousedown方法：

this.test = "hello world!";
this.svg.on("mousedown", this.mousedown);
// this.svg.on("mousedown", Graph.prototype.mousedown); <-- does the same

现在的问题是，这个方法没有在
图
上下文中调用，而是对
g.[object svganizatedstring]
的引用。似乎没有调用实际的方法
Graph.prototype.mousedown

有什么方法可以实现我在这里想要做的吗？
这是JavaScript中的一个常见问题，不是D3独有的（你可以通过谷歌搜索“JavaScript函数此对象范围”之类的内容来阅读更多内容）。特别是在这种情况下，d3显式地将
this
对象（也称为上下文）设置为与mousedown事件关联的html或svg元素。在其他几种情况下，例如在
attr
和
style
方法中，它也会执行相同的操作。这被认为是d3的一个有用特性，因为它为您组合了html元素及其相关数据。正如您所发现的，这确实意味着，当您将类实例方法传递给d3方法时，会出现一个
这个
冲突，这就是为什么您通常不会看到使用这种类型的类构造的d3示例的部分原因（即使用
原型
和
这个
）

不过，您仍然可以通过将
this
（图形实例）分配给闭包外部声明的变量来解决这个问题（同样，这是一种通用的JavaScript技术，而不是d3技术）：

请注意，因此，您将不再能够从mousedown方法中访问关联的html/svg元素，如果您不需要它，这是可以的。否则，您必须将其作为第三个参数传递给mousedown函数：
\u this.mousedown（d，i，this）

而且，如果你在很多地方使用这种风格，过一段时间就会变得单调乏味。如果是这样，您可能会考虑切换到定义不同的类——而不依赖于<代码>原型和<代码>此< /代码>。最自然的是，您可能希望以实现d3对象的方式来实现它。您可以通过查看d3源代码获得更多信息（查找
d3.svg.axis
中的一个示例）。
这是JavaScript中的一个常见问题，不是d3独有的（您可以通过谷歌搜索“JavaScript函数此对象范围”等内容来了解更多信息）。特别是在这种情况下，d3显式地将
this
对象（也称为上下文）设置为与mousedown事件关联的html或svg元素。在其他几种情况下，例如在
attr
和
style
方法中，它也会执行相同的操作。这被认为是d3的一个有用特性，因为它为您组合了html元素及其相关数据。正如您所发现的，这确实意味着，当您将类实例方法传递给d3方法时，会出现一个
这个
冲突，这就是为什么您通常不会看到使用这种类型的类构造的d3示例的部分原因（即使用
原型
和
这个
）

不过，您仍然可以通过将
this
（图形实例）分配给闭包外部声明的变量来解决这个问题（同样，这是一种通用的JavaScript技术，而不是d3技术）：

请注意，因此，您将不再能够从mousedown方法中访问关联的html/svg元素，如果您不需要它，这是可以的。否则，您必须将其作为第三个参数传递给mousedown函数：
\u this.mousedown（d，i，this）

而且，如果你在很多地方使用这种风格，过一段时间就会变得单调乏味。如果是这样，您可能会考虑切换到定义不同的类——而不依赖于<代码>原型和<代码>此< /代码>。最自然的是，您可能希望以实现d3对象的方式来实现它。您可以通过查看d3源代码获得更多信息（查找
d3.svg.axis
中的一个示例）。
先生，您是我的救世主！非常感谢我已经为此奋斗了几个小时！先生，你是我的救世主！非常感谢我已经为此奋斗了几个小时！
Graph.prototype.mousedown = function() {
    alert(this.test);
};

// _this is the instance of your class
_this = this;

// _this inside this closure will continue to point to your Graph instance
this.svg.on("mousedown", function(d, i) { _this.mousedown(d, i) });