D3.js实现折线图的方法详解

序

D3.js是一个JavaScript类库，帮助开发人员操作基于数据的文档。在《D3.js实现柱状图的方法详解》中，我们已经介绍了如何使用D3.js实现一个简单的直方图。今天，我们将学习使用D3.js来实现折线图。有兴趣的朋友可以看看。

折线图由轴、线和点组成。和直方图的实现一样，我们先搭建通用的绘图框架，代码如下(别忘了加D3.js):

！doctype html lang=' en ' head meta charset=' utf-8 ' title折线图/title style . container { margin : 30pxauto；宽度： 600 px；height: 300pxborder: 1px固体# 000；}/style/head body div class=' container ' SVG width=' 100% ' height=' 100% '/SVG/div script src=' http :http://d3js . org/D3 . v3 . min . js ' charset=' utf-8 '/script script window . onload=function(){ var width=600，height=300SVG画布边缘与图表内容var padding之间的距离={顶部： 50，右侧： 50，底部： 50，左侧： 50 }；//创建一个组来组合要绘制的图表元素，var main=d3.select('。containers VG’)。追加(' g ')//添加主类。classed('main') //设置转换属性。attr('transform '，' translate '(' padding . top '，' padding . left '))；};/脚本/正文/html坐标轴的实现

要创建轴，首先需要创建比例尺。《D3.js实现柱状图的方法详解》中提到了序数标度和线性标度。因为折线的点之间存在连续的关系，所以我们对折线图的X轴和Y轴使用线性比例。

//模拟数据vardataset=[{x: 0，y: 11}、{x: 1，y: 35}、{x: 2，y: 23}、{x: 3，y: 78}、{x: 4，y: 18}、{x: 6，y: 98}、{ x: 7，y 3: 100 }//创建x轴的比例尺(线性比例尺)var xscale=d3.scale.linear()。域(d3.extent)(数据集，函数(d){ return d . x；})) .范围([0，width-padding . left-padding . right])；//创建y轴的刻度(线性刻度)var y刻度=d3.scale.linear()。域([0，d3.max (dataset，function(d){ return d . y；})]) .range([height-padding . top-padding . bottom，0])；//创建x轴varxaxis=d3.svg.axis()。标度(xscale)。定向('底部')；//创建y轴varyaxis=d3.svg.axis()。标度(yscale)。定向('左')；//添加SVG元素并与x轴“绑定”。main.append ('g ')。attr ('class '，' axis ')。attr ('transform '，' translate (0 '，(height-padding . top-padding . bottom)')')。调用//添加SVG元素并“绑定”到y轴。main.append ('g ')。attr ('class '，' axis ')。呼叫(yaxis)；这次我们模拟了一些点的数据来绘制折线。D3.scale.linear()创建线性比例，linear.domain()定义一个域，linear.range()定义一个值域。这里需要注意的是，SVG画布的Y轴与传统认知中的Y轴方向相反，所以在定义Y轴的定义域与值域的对应关系时，也需要相反。D3.extent可以获取参数数组中的最大值和最小值，并将它们作为数组返回。然后，用d3.svg.axis()创建两个坐标轴，比例尺应用于它们，坐标轴的刻度方向用axis.orient()设置。最后，添加SVG元素，并使用call()将定义的坐标轴与SVG元素连接起来。通过设置元素的变换属性来移动元素，使它们看起来像一个坐标系。

折线的实现

在D3.js中，需要先创建一个line函数，然后将这个函数得到的值赋给表示折线的path元素的d属性，这样就可以绘制折线了。明确一点，线是函数，不是对象。

具体代码如下：

//添加折线varline=d3.svg.line()。x(函数(d) {return xscale (d.x)})。y(函数(d){返回y刻度(d . y)}；})//选择线条类型。插值('线性')；//添加path元素，并通过第()行计算值以分配main.append ('path ')。attr ('class '，' line ')。attr ('d '，行(数据集))；这样做之后，我们得到如下图所示的一条线。

点数的实现

点实际上是圆，所以这里我们用SVG中的圆元素来画点。

//添加点main.selectall('圆圈')。数据(数据集)。输入()。追加('圆圈')。attr ('CX '，函数(d){ return xscale(d . x)；}) .attr('cy '，函数(d){ return yScale(d . y)；}) .attr('r '，5)。attr('fill '，函数(d，I){ return GetColor(I)；});选择主元素中所有要“占据”的圆(因为此时选择了一个空集合，但是这个集合代表主元素中的所有圆)，然后将数据集绑定到这个集合，并使用enter()和append()一起添加一个新的圆元素，直到集合元素的数量与数据集子元素的数量相同。通过按比例计算每个圆的坐标，并为其相关属性赋值，完成点的添加。

摘要

以上就是用D3.js实现折线图的全部内容，希望这篇文章对大家的学习和工作有所帮助。有问题可以留言交流，边肖会陆续更新关于D3.js的文章。请继续关注我们。