d3学习day1----画曲线

gxyz 发布于2019-08-02 15:59 / 3154人阅读

摘要：画布的基本布局如下图实现过程如下先定义画图的容器的尺寸定义元素设置再通过添加一个元素，这段代码添加了两个元素，为了比较和添加第一个添加第二个，并把这个元素赋值给变量定义要画的曲线的数组将成比例缩放轴缩放使用中的函数进行缩放，因为是线

d3画布的基本布局如下图

实现过程如下：

先定义画图的容器的尺寸

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,而不是标签 而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"

没有缩放的初始图

加缩放后的效果

缩放代码：将成比例缩放

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后的样子

css代码：

path {
    /*定义画出的线条无填充，*/
    fill: none;
    /* 线颜色*/
    stroke: brown;
    /*线条粗细*/
    stroke-width: 2;
}

设置平滑之后的样子

代码：

.interpolate("cardinal") //让线条变得光滑，不是折线而是光滑的曲线

由此，d3画线就已经完成了，接下来就要画坐标系，请参考下篇文章，~~~

GPU云服务器云服务器画曲线 d3.js 函数曲线 python画曲线 ps怎么画曲线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54455.html

d3学习day1----画曲线

摘要：画布的基本布局如下图实现过程如下先定义画图的容器的尺寸定义元素设置再通过添加一个元素，这段代码添加了两个元素，为了比较和添加第一个添加第二个，并把这个元素赋值给变量定义要画的曲线的数组将成比例缩放轴缩放使用中的函数进行缩放，因为是线 d3画布的基本布局如下图 showImg(https://segmentfault.com/img/bVZMKl?w=759&h=410); 实现过程如下...

wqj97 2019-08-21 17:56 评论0 收藏0
用canvas绘制一个曲线动画——深入理解贝塞尔曲线

摘要：实现这样一个曲线动画可以点击这里查看在线演示在写代码之前，先了解一下什么是贝塞尔曲线吧。绘制二次贝赛尔曲线路径这样就完成了基本的绘制二次贝塞尔曲线的方法了。我的github博客地址 https://github.com/hujiulong/... 前言在前端开发中，贝赛尔曲线无处不在：它可以用来绘制曲线，在svg和canvas中，原生提供的曲线绘制都是使用贝赛尔曲线它也可以...

xiaowugui666 2019-08-21 18:35 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

andong777 2019-08-20 16:28 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

gotham 2019-08-01 16:48 评论0 收藏0