2

次のコードに問題があります。「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>
4

1 に答える 1

1

thisChart コンストラクター (パラメーターとして渡される無名関数ではなく) で直接使用するか、Chart オブジェクトのメソッドで使用するか、手動で使用するかcall、applyChat オブジェクトを使用し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>
于 2012-10-31T21:37:28.153 に答える