为什么“此”变量不是预期值？

Question

I am having an issue with the following code. 我的以下代码有问题。 On the lines with the "console.log", the 'this' variable should contain 'Object Chart', but, instead, contains 'path.line'. 在带有“ console.log”的行上，“ this”变量应包含“ Object Chart”，而应包含“ path.line”。 Hence, the reference to xscale is undefined. 因此，对xscale的引用是不确定的。 Why am I getting this? 我为什么得到这个？ This error occurs under Chrome and Firefox. 在Chrome和Firefox下会发生此错误。

Thank you. 谢谢。

<!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>

Answer 1

Unless you use this directly in the Chart constructor(not in an anonymous function passed as a parameter) or in a method of a Chart object or manually use call or apply with an Chat object, this wouldn't reference a Chart object. 除非你用this在图表构造直接（不作为参数传递的匿名函数），或在图表对象的方法或手动使用call或apply与聊天对象， this就不会引用图表对象。

What you can do is explicitly set a variable to the chart object and use that in the functions. 您可以做的是为图表对象显式设置一个变量，然后在函数中使用它。

<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>

为什么“此”变量不是预期值？

问题描述

1 个解决方案

解决方案1
1 2012-10-31 21:37:28

为什么“此”变量不是预期值？

问题描述

1 个解决方案

解决方案1 1 2012-10-31 21:37:28

解决方案1
1 2012-10-31 21:37:28