d3学习day1----画曲线

本文介绍如何使用d3.js库创建动态曲线图。包括定义画布尺寸、添加SVG元素、缩放坐标轴、绘制平滑曲线等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

d3画布的基本布局如下图

clipboard.png

实现过程如下:
先定义画图的容器的尺寸
var width = 500,
    height = 200,
    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")
    // 设置width,height
    .attr("width", width) //attribute
    .attr("height", height)
再通过append()添加一个g元素,这段代码添加了两个g元素,为了比较select和selectAll
d3.select("svg").append("g")//添加第一个g
var g = d3.select("svg")
    .append("g") //添加第二个g,并把这个元素赋值给变量g
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    //定义要画的曲线的数组data[]
var data = [2, 12, 3, 4, 5, 6, 22]
将g成比例缩放
x轴缩放
var scale_x = d3.scale.linear() //使用d3中的scale函数进行缩放,因为是线性的所以使用linear
    .domain([0, data.length - 1]) //domain定义输入范围
    .range([0, g_width]) //range()定义输出范围
y轴缩放
var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定义输入范围
    .range([0, g_height]) //range()定义输出范围
通过d3下面的svg下面的line()实现line_generator函数
var line_generator = d3.svg.line()
    .x(function(d, i) { return scale_x(i); }) //x坐标点的值为data数组的下标,参数d表示传进来的数据,i表示下标
    .y(function(d) { return scale_y(d) }) //y坐标的值为数组中实际的每一项的值
    .interpolate("cardinal") //让线条变得光滑,不是折线而是光滑的曲线

// d3.select("g")
//     .append("path")
//     .attr("d", line_generator(data)) //通过d属性值,添加line_generator函数
//     // 其实d就是 path-data 的缩写,d= "M"
当页面有多个相同元素,select只能选择符合条件的第一个元素,想要选择其中某一个指定的元素,可以把那个元素赋给一个变量,然后使用变量名去实现
如下所示,g表示上面赋值的那个变量g,而不是标签<g></g>
而selectAll选中的是页面中所有的元素
g.append("path").attr("d", line_generator(data)) 
//通过d属性值,添加line_generator函数
// 其实d就是 path-data 的缩写,d= "M0,2Q0.7999999999999999,11.9,1,12C1.3,12.15,1.7,4.2,2,3S2.7,3.7,3,4S3.7,4.7,4,5S4.7,3.4499999999999997,5,6Q5.2,7.7,6,22"
没有缩放的初始图

clipboard.png

加缩放后的效果

clipboard.png

缩放代码:将<g></g>成比例缩放

var scale_x = d3.scale.linear() //使用d3中的scale函数进行缩放,因为是线性的所以使用linear
    .domain([0, data.length - 1]) //domain定义输入范围
    .range([0, g_width]) //range()定义输出范围

var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)]) //domain定义输入范围
    .range([0, g_height]) //range()定义输出范围

给path设置css后的样子

clipboard.png

css代码:

path {
    /*定义画出的线条无填充,*/
    fill: none;
    /* 线颜色*/
    stroke: brown;
    /*线条粗细*/
    stroke-width: 2;
}
设置平滑之后的样子
代码:
.interpolate("cardinal") //让线条变得光滑,不是折线而是光滑的曲线

clipboard.png

由此,d3画线就已经完成了,接下来就要画坐标系,请参考下篇文章,~~~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值