用一个计算去处理，

我也看不了

translate(50,30) 

是因为你使用的 d3js  版本比视频中老师用的新，接口不一样。

参考 这里：

https://d3js.org.cn/document/d3-shape/#curves

使用指定的 alpha 值([0, 1]) 返回一条 Catmull–Rom 生成器。如果 alpha 为 0 则等价于 curveCardinal，如果 alpha 为 1 则会生成 chordal 曲线，如果 alpha 为 0.5 则会生成 centripetal spline

老师 使用的接口 

d3.line().x().y().interpolate('cardinal')

等价于新的接口用法

d3.line().x().y().curve(CatmullRom.alpha(0.5))

里面的 0.5 设置为 0

表示的一个数据范围的输入

版本不一样，你直接写d3.line()即可，不用svg

贴代码 (^·_·^),多重复看视频,还有控制台信息 

QAQ ~~~ (注: 老师的是 v3版本, 可能你用的是 v4)

svg标签没有这个属性，path标签才有这个属性。

楼主应该老师的版本比你的低，我也是郁闷了好一阵，希望下面的代码能够帮到你

var scale_x = d3.scaleLinear()
    .domain([0,data.length-1])
    .range([0,g_width]);
var scale_y = d3.scaleLinear()
    .domain([0,d3.max(data)])
    .range([g_height,0])
    
var line_generator = d3.line()
.x(function (d,i) {
        return scale_x(i);
        // return i;
    })
.y(function (d) {
        return scale_y(d);
        // return d;
    })
    .curve(d3.curveCardinal)

// 绘制曲线
d3.select("g")
.append("path")
.attr("d",line_generator(data))

var width = 500,
height = 250,
margin={left:50, top:30, right:20, bottom:20},
g_width = width - margin.left - margin.right,
g_height = height - margin.top - margin.bottom;

//svg
var svg = d3.select("#container")
.append("svg:svg")
//width, height
.attr("width", width)
.attr("height",height)

var g = d3.select("svg")
.append("g")
.attr("transform", "translate("+margin.left+", "+margin.top+")")


var data = [1,3,5,7,8,4,3,7];

var scale_x = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, g_width])
var scale_y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, g_height])

var line_generator = d3.svg.line()
.x(function(d, i){return scale_x(i);}) //0,1,2,3...
.y(function(d){ return scale_y(d);}) //1,3,5...
.interpolate("cardinal")

d3.select("g")
.append("path")
.attr("d", line_generator(data)) //d="M1,0L20,40L40,50L100,100L0,200", d - path data

你的代码在哪里？

最后一行

.attr("d",line_generator(data))

中已经定义了，d代表着path的轨迹，d的值是用函数line_genrator()将数组data的数据传进来的。也就是说d的值就是数组的值。至于i，这个，我也在思考

把源码发过来看看