I'm encountering a problem with this code snippet. The 'this' variable is expected to hold 'Object Chart' on the lines where 'console.log' is used, but instead, it contains 'path.line'. As a result, the reference to xscale remains undefined. What could be causing this issue? This error seems to occur consistently in both Chrome and 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>