慕雪5430657
用一个计算去处理,
刘一驰
我也看不了
不做人了
translate(50,30)
慕粉3727899
是因为你使用的 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
慕粉3727899
表示的一个数据范围的输入
慕用6167496
版本不一样,你直接写d3.line()即可,不用svg
qq_尼麻麻_0
贴代码 (^·_·^),多重复看视频,还有控制台信息
QAQ ~~~ (注: 老师的是 v3版本, 可能你用的是 v4)
jiakubala
慕粉1612443656
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))
trinidy
知道原因了
youbaisan
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
小馨
周末_1991
Originally_Yoke
Originally_Yoke
IHaveADreamZX
你的代码在哪里?
jin_hw
淹死的鱼_
最后一行
.attr("d",line_generator(data))
中已经定义了,d代表着path的轨迹,d的值是用函数line_genrator()将数组data的数据传进来的。也就是说d的值就是数组的值。至于i,这个,我也在思考
xiaofei_
把源码发过来看看