Question

我遇到以下代码的问题。在带有“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>

Answer 1

除非您直接在Chart构造函数中使用this（不在作为参数传递的匿名函数中）或在Chart对象的方法中使用this，否则手动使用call或apply一个Chat对象，<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>不会引用Chart对象。

您可以做的是将变量显式设置为图表对象，并在函数中使用它。

{{1}}

为什么'this'变量不是预期值？

1 个答案: