D3.js d3 js轴与实际数据不匹配

我试图学习d3，但在将数据与轴匹配时遇到了一些麻烦

签出此代码段

身体{
字体：10px无衬线；
利润率：30像素；
}
路径线{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.安讯士{
形状渲染：边缘清晰；
}
.x轴路径{
填充：无；
行程：#000；
}
.y轴线，.y轴路径{
填充：无；
行程：#000；
}
var margin={顶部：80，右侧：80，底部：80，左侧：80}，
宽度=950-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
//我们生产线的数据
var lineData=[{“x”：1，“y”：5}，{“x”：20，“y”：20}，
{x:40，y:10}，{x:60，y:40}，
{“x:80，y:5}，{“x:100，y:60}]；
var x=d3.scale.linear（）.range（[0，宽度]），
y=d3.刻度.线性（）.范围（[高度，0]），
xAxis=d3.svg.axis（）.scale（x），
yAxis=d3.svg.axis（）.scale（y）.orient（“左”）；
x、 域（[0100]）；
y、 域（[0100]）；
//这就是我们上面讨论的访问器函数
var lineFunction=d3.svg.line（）
.x（功能（d）{
返回d.x；
})
.y（功能（d）{
返回d.y；
})
.插入（“单调”）；
//SVG容器
var svgContainer=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
//我们画的路线
var lineGraph=svgContainer.append（“路径”）
.attr（“d”，lineFunction（lineData））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）
.attr（“类”、“路径”）；
//添加x轴。
svgContainer.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加y轴。
svgContainer.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+width+），0）
.呼叫（yAxis）；

您设置了标尺

x

和

y

，并将它们分配给轴，但在存取器功能中没有指定它们。由于数据点的缩放方式应与轴的缩放方式相同，因此您需要这样使用它们：

var lineFunction = d3.svg.line()
        .x(function (d) {
            return x(d.x);
        })
        .y(function (d) {
            return y(d.y);
        })
        .interpolate("monotone");

身体{
字体：10px无衬线；
利润率：30像素；
}
路径线{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.安讯士{
形状渲染：边缘清晰；
}
.x轴路径{
填充：无；
行程：#000；
}
.y轴线，.y轴路径{
填充：无；
行程：#000；
}
var margin={顶部：80，右侧：80，底部：80，左侧：80}，
宽度=950-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
//我们生产线的数据
var lineData=[{“x”：1，“y”：5}，{“x”：20，“y”：20}，
{x:40，y:10}，{x:60，y:40}，
{“x:80，y:5}，{“x:100，y:60}]；
var x=d3.scale.linear（）.range（[0，宽度]），
y=d3.刻度.线性（）.范围（[高度，0]），
xAxis=d3.svg.axis（）.scale（x），
yAxis=d3.svg.axis（）.scale（y）.orient（“左”）；
x、 域（[0100]）；
y、 域（[0100]）；
//这就是我们上面讨论的访问器函数
var lineFunction=d3.svg.line（）
.x（功能（d）{
返回x（d.x）；
})
.y（功能（d）{
返回y（d.y）；
})
.插入（“单调”）；
//SVG容器
var svgContainer=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
//我们画的路线
var lineGraph=svgContainer.append（“路径”）
.attr（“d”，lineFunction（lineData））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）
.attr（“类”、“路径”）；
//添加x轴。
svgContainer.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加y轴。
svgContainer.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+width+），0）
.呼叫（yAxis）；