Javascript d3点之间的线不工作

我用d3做了一个散点图，想把点和线连接起来，我试着用人们在网上写的东西把线连接起来，但似乎不起作用

function makeGraph(sampleData){
    console.log(sampleData);
    var vis = d3.select("#svgVisualize");

    yMax = d3.max(sampleData, function (point) {return point.y;});

    //step 1 : scale the data

    xRange = d3.scale.ordinal().domain(sampleData.map(function (d) { return d.x; })).rangePoints([0, 700]);
    yRange = d3.scale.linear().range([400, 40]).domain([0, yMax]);


    //step 2: scale the axis
    xAxis = d3.svg.axis().scale(xRange);
    yAxis = d3.svg.axis().scale(yRange).orient("left");

    //Step3: append the x and y axis
    vis.append('svg:g')
            .call(xAxis)
            .attr("transform", "translate(90,400)")
            .append("text")
            .text("Build Model")
            .attr("y", 70)
            .attr("x", 150);
    vis.append('svg:g')
            .call(yAxis)
            .attr("transform", "translate(90,0)")
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -80)
            .attr("x", -130)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Number of Users");

    var circles = vis.selectAll("circle").data(sampleData);

    circles
            .enter()
            .insert("circle")
            .attr("cx", function (d) {return xRange(d.x);})
            .attr("cy", function (d) { return yRange(d.y); })
            .attr("r", 4)
            .attr("transform", "translate(90,0)")
            .style("fill", "blue");
    var lineFunction = vis.line()
            .x(function (d) {
              return d.x;
            })
            .y(function (d) {
              return d.y;
            })
            .interpolate("linear");

    vis.append("path")
            .attr("d", lineFunction(sampleData))
            .style("stroke-width", 0.5)
            .style("stroke", "rgb(6,120,155)")
            .style("fill", "none")
            .on("mouseover", function () {
              d3.select(this)
                      .style("stroke", "orange");
            })
            .on("mouseout", function () {
              d3.select(this)
                      .style("stroke", "rgb(6,120,155)");
            });
}

---

如果有人能帮忙的话，那就太好了，我还是d3新手，行函数必须是这样的：

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

---

您的示例运行良好，我必须执行以下操作

• 将创建路径生成器的行更改为

  d3.svg.line

  （就像Gerardo的回答一样）
• 为您的圆和路径创建一个组，这样您就不必向这两个圆添加

  .attr（“transform”，“translate（90,0）”）

• 对路径使用a（尽管不是必需的）

函数生成图（sampleData）{
var svg=d3。选择（“#svgVisualize”）
yMax=d3.max（采样数据、函数（点）{
返回点y；
});
xRange=d3.scale.ordinal（）.domain（sampleData.map）（函数（d）{
返回d.x；
})).范围点（[0700]）；
yRange=d3.scale.linear（）.range（[400,40]）.domain（[0,yMax]）；
//步骤2：缩放轴
xAxis=d3.svg.axis（）.scale（xRange）；
yAxis=d3.svg.axis（）.scale（yRange.orient（“左”）；
//步骤3：附加x轴和y轴
append（'svg:g'）
.呼叫（xAxis）
.attr（“转换”、“翻译（90400）”）
.append（“文本”）
.text（“构建模型”）
.attr（“y”，70）
.attr（“x”，150）；
append（'svg:g'）
.呼叫（yAxis）
.attr（“转换”、“翻译（90,0）”）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，-80）
.attr（“x”，-130）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“用户数量”）；
//资料
var g=svg.append（'g'）
.attr（'类'，'数据'）
.attr（“转换”、“翻译（90,0）”）
var circles=g.selectAll（“circle”）.数据（sampleData）；
圈子
.输入（）
.插入（“圆圈”）
.attr（“cx”，功能（d）{
返回x范围（d.x）；
})
.attr（“cy”，函数（d）{
返回y范围（d.y）；
})
.attr（“r”，4）
.样式（“填充”、“蓝色”）；
var lineFunction=d3.svg.line（）
.x（函数（d）{返回xRange（d.x）；}）
.y（函数（d）{return yRange（d.y）；}）
.插入（“线性”）；
var path=g.selectAll（'path'）。数据（[sampleData]）
.输入（）
.append（'路径'）
.attr（“d”，lineFunction）
.样式（“笔划宽度”，0.5）
.style（“笔划”、“rgb（6120155）”）
.style（“填充”、“无”）
.on（“鼠标悬停”，函数（）{
d3.选择（本）
.风格（“笔划”、“橙色”）；
})
.on（“mouseout”，函数（）{
d3.选择（本）
.风格（“笔画”、“rgb（6120155）”）；
});
}
生成图([
{x:0，y:100}，
{x:100，y:100}，
{x:200，y:200}，
{x:300，y:100}
])

我做了更改，但仍然收到一个错误，说这部分不是函数：vis.append（“path”）.datum（sampleData）.enter（）.attr（“d”，lineFunction）.style（“笔划宽度”，0.5）.style（“笔划”，“rgb（6120155）”）.style（“填充”，“无”）；}刚刚更改了答案，现在就试试。等一下，你看到圆圈了吗，还是什么？我看不到您在代码中添加SVG。是的，我添加了SVG（我的缺点是，我只是没有在代码中显示该行），我添加了更改，但仍然会出现该错误，但当我将数据更改为数据时，错误会消失，但行不会仍然出现