我在使用以下代码时遇到问题。在带有“console.log”的行中，“this”变量应包含“Object Chart”，但包含“path.line”。因此，对 xscale 的引用是未定义的。为什么我得到这个？在 Chrome 和 Firefox 下会出现此错误。
谢谢。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 3.0px;
}
</style>
</head>
<body>
<script src="d3.v2.js"></script>
<script>
var kev_vs_rho= [{
values: [{x: 0.01, y: 0.2058},{x: 0.03, y: 0.2039},{x: 0.05, y: 0.2020}] }, {
values: [{x: 0.01, y: 1.6468},{x: 0.03, y: 1.6303},{x: 0.05, y: 1.6137}] }, ];
kev_vs_rho.minX=0.01;
kev_vs_rho.maxX=0.99;
kev_vs_rho.minY=0.01;
kev_vs_rho.maxY=33.66;
</script>
<div id="chart1"> </div>
<script>
"use strict";
var Chart = function ( _width, _height, _data, _div ) {
this.data = _data;
this.div = _div;
this.idx1 = 0;
this.select1 = 0;
this.margin = {top: 30, right: 30, bottom: 30, left: 80};
this.width = _width - this.margin.left - this.margin.right;
this.height = _height - this.margin.top - this.margin.bottom;
this.xscale = d3.scale.linear()
.domain([this.data.minX, this.data.maxX])
.range([0, this.width]);
this.yscale = d3.scale.linear()
.domain([this.data.minY, this.data.maxY])
.range([this.height, 0]);
this.lineA = d3.svg.line()
.x(function (d) {
console.log( this ); // <<== is 'path.line', not object Chart
console.log( this.xscale ); // <<== undefined
return this.xscale(d.x); // <<== undefined
})
.y(function (d) { return this.yscale(d.y); });
this.svg1 = d3.select(_div).append("div").append("svg")
.datum(_data[this.select1].values)
.attr("width", this.width + this.margin.left + this.margin.right)
.attr("height", this.height + this.margin.top + this.margin.bottom)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
this.lineB = this.svg1.append("path")
.attr("class", "line")
.datum(this.data[this.select1].values)
.attr("d", this.lineA);
};
var chart1 = new Chart( 960, 400, kev_vs_rho, "#chart1");
</script>
</body>
</html>
最佳答案
除非您直接在 Chart 构造函数中(而不是在作为参数传递的匿名函数中)或在 Chart 对象的方法中使用 this 或手动使用 call或 apply对于 Chat 对象，this 不会引用 Chart 对象。
您可以做的是为图表对象显式设置一个变量并在函数中使用它。
<script>
"use strict";
var Chart = function ( _width, _height, _data, _div ) {
self = this;
this.data = _data;
this.div = _div;
this.idx1 = 0;
this.select1 = 0;
this.margin = {top: 30, right: 30, bottom: 30, left: 80};
this.width = _width - this.margin.left - this.margin.right;
this.height = _height - this.margin.top - this.margin.bottom;
this.xscale = d3.scale.linear()
.domain([this.data.minX, this.data.maxX])
.range([0, this.width]);
this.yscale = d3.scale.linear()
.domain([this.data.minY, this.data.maxY])
.range([this.height, 0]);
this.lineA = d3.svg.line()
.x(function (d) {
console.log( self ); // <<== is 'path.line', not object Chart
console.log( self.xscale ); // <<== undefined
return self.xscale(d.x); // <<== undefined
})
.y(function (d) { return self.yscale(d.y); });
this.svg1 = d3.select(_div).append("div").append("svg")
.datum(_data[this.select1].values)
.attr("width", this.width + this.margin.left + this.margin.right)
.attr("height", this.height + this.margin.top + this.margin.bottom)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
this.lineB = this.svg1.append("path")
.attr("class", "line")
.datum(this.data[this.select1].values)
.attr("d", this.lineA);
};
var chart1 = new Chart( 960, 400, kev_vs_rho, "#chart1");
</script>
关于javascript - 为什么 'this' 变量不是预期值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13167630/