先来看看效果图
下面直接上源代码，html文件
<html> <head> <meta charset =“ utf-8”> <title> </title> </title> </title> </title> .xis path，.axis line {fill：none;中风：黑色；形状渲染：酥脆； }。轴文本{font-fomily：sans-serif;字体大小：11px; } .overlay {fill：none;指针事件：全部； } .tooltip {width：150px;身高：自动；位置：绝对；字体家庭：Simsun；字体大小：16px;线高：26px;文本平衡：左；边界：1px固体黑色；背景色：白色；边界拉迪乌斯：5px; } .tooltip .title {border-bottom：1px实心＃000;文字平衡：中心； } .tooltip .descolor {width：10px;身高：10px;浮子：左；保证金：9px 8px 1px 8px; } .tooltip .destext {display：inline; } .focusline {stroke：black;中风宽度：1px;中风 - 戴式：5,5; } </style> </head> <body> <script src =“ http://d3js.org/d3.v3.js” charset =“ utf-8”> </script> </script> <script src =“ linechart.js” linechart.js“ XMLNS：XLINK =“ http://www.w3.org/1999/xlink” zoomandpan =“ magnify” style =“ backick-color：#ffffff;” contentStyleType =“ text/css” ViewBox =“ 0 0 2000.0 2000.0” preserveSpectRatio =“ Xmidymid Meet” XMLNS =“ http://www.w.w.3.org/2000/svg/2000/svg” PreserveAspectratio =“无遇见”> </symber> <符号ID =“ fillgauge2” ViewBox =“ 0 200.0 200.0” preserveaspectratio =“无符合”> </symber> </defs> <使用x =“ 0” y =“ y =” y =“ 0” 0“ xmlns：xlink =” xlink：href =“＃fillgauge1” xlink：type =“ simple” xlink：artuate =“ onload” symberType =“ 17” xlink：show =“ embed”/> <使用x =“ 20” y =“ 20” xmlns：xlink =“ xlink =” xlink：type =“ simple” xlink：artuate =“ onload” sumplype =“ 17” xlink：show =“ embed”/> </> </> </svg> <script> var dataset = [{country：“中国”，GDP：[2000,11920]，[2000,11920]，[2001,13170]，[2001,13170]，[2001,14550] [2003,16500]，[2004,19440]，[2005,22870]，[2006,27930]，[2007,35040]，[2008,45470]，[2009,51050]，[2009,51050]，[2010,59490]，[2010,59490]，[2011，73140]国家：“美国”，GDP：[[2000,47310]，[2001,41590]，[2002,39800]，[2003,43020]，[2004,46550]，[2005,45710]，[2005,45710]，[2006,43560]，[2007,43560]，[2007,43560] [2009,50350]，[2010,54950]，[2011,59050]，[2012,59370]，[2013,48980]]}]; var Gauge1 = loadlauge1 = loadlinechart（“ fillgauge1”，dataset）;函数newValue（）{if（Math.random（）> .5）{return Math.Round（Math.random（）*100）; } else {return（Math.random（）*100）.tofixed（1）; }}函数刷新线（Gauge1）{// alert（“ hehe”）; // document.getElementById（“ fillgauge1”）。innerhtml =“”; var UpdateData = [{country：“中国”，GDP：[[2000，newValue（）]，[2001，newvalue（）]，[2002，newvalue（）]，[2003，newvalue（），[2004，newvalue（），newvalue（） [2006，newvalue（）]，[2007，newvalue（）]，[2008，newvalue（）]，[2009，newvalue（）]，[2010，newvalue（），[2011，newvalue（），[2012，2012，newvalue（Newvalue（），newvalue（）]，[2013，newvalue（Newvalue]（Newvalue（）） [[[2000，newvalue（）]，[2001，newvalue（）]，[2002，newvalue（）]，[2003，newvalue（）]，[2004，newvalue（）]，[2005，newvalue（Newvalue（）] [2009，newvalue（）]，[2010，newvalue（）]，[2011，newvalue（）]，[2012，newvalue（）]，[2013，newvalue（）]]}}}; Gauge1.update（更新）; } self.setInterval（“ Refreshline（Gauge1）”，5000）; </script> </body> </html>linechart.js负责加载和刷新折线图
function loadLaineChart（elementID，dataset）{var svg = d3.Select（“＃” + elementID）; var strs = svg.attr（“ viewbox”）。split（“”）;警报（数据集）; var width = strs [2]; var高度= strs [3]; //外边框var padding = {顶部：50，右：50，底部：50，左：50}; var name = new array（）; //计算gdp的最大值var gdpmax = 0; for（var i = 0; i <dataset.length; i ++）{var currgdp = d3.max（dataset [i] .gdp，function（d）{return d d [1];}）; if（CurrGDP> gdpmax）gdpmax = currgdp; } var gdpnumb = dataset [0] .gdp.length; for（var j = 0; j <gdpnumb; j ++）{names [j] =（dataset [0] .gdp [j]）[0]; } alert（名称）; var xScale = d3.scale.linear（）.domain（[[2000，2013]）。 // var xscale = d3.scale.ordinal（）// .domain（names）// .rangeroundbands（[[0，width -padding.left.left-padding.right.right]）; var yscale = d3.scale.linear（）.domain（[[0，gdpmax * 1.1]）。 //创建一个直线生成器var linePath = d3.svg.line（）.x（function（d）{return xscale（d [0]）;}）.y（function（d）{return yscale（d [1]）;}）.interpalle（“ baseal”）; //定义两个颜色var颜色= [d3.rgb（0，0，255），d3.rgb（0，255，0）]; //添加路径svg.selectall（“ path”）//选择<svg> <SVG> <路径> .data（dataSet）//绑定数据.enter（）//选择inter（） {return linePath（d.gdp）; // //返回直线生成器得到的路径}）.attr（“填充”，“无”）.attr（“ stroke-width”，3）.attr（“ stroke”，function'，function（d，i）{返回颜色[i];}）; //添加垂直于x x var vline = svg.append（“ line”）.attr（“ class”，“ focusline”）.spyle（“ display”，“ none”）; //添加一个提示框var tooltip = d3.Select（“ body”）.append（“ div”）.attr（“ class”，“ tooltip”）.Style（“ opacity”，0.0）; var title = tooltip.append（“ div”）.attr（“ class”，“ title”）; var des = tooltip.selectall（“。des”）.data（dataset）.enter（）.append（“ div”）; var descolor = des.append（“ div”）.attr（“ class”，“ descolor”）; var destext = des.append（“ div”）.attr（“ class”，“ destext”）; //添加一个透明的监视鼠标事件用的矩形svg.append（“ rect”）.attr（“ class”，“ offlay”）.attr（“ x”，padding.left）.attr（“ y”，padding.top）.attr（“ width”，width -width -padding.left.left.left-left -padding.right.right）.Attr（padding.right）。 tooltip.style（“左”，（d3.event.pagex） +“ px”）.STYLE（“ top”，（d3.event.pagey + 20） +“ px”）。 vline.Style（“显示”，“无”）;}）。函数mousemove（）{ / *当鼠标在透明矩形内滑动时调用 * /// var data = dataset [0] .gdp; //获取鼠标相对于透明矩形左上角的坐标，左上角坐标为（0,0）var鼠标= d3.mouse（this）[0] - padding.left; var鼠标= d3.mouse（this）[1] -padding.top; //通过比例尺的反函数计算原数据中的值，例如x0为某个年份，y0为gdp var x0 = xscale.invert（mousex）; var y0 = yscale.invert（mousey）; //对x0四舍五入，如果x0是2005.6，2006年；如果是2005.2，则返回2005x0 = math.round（x0）; //查找在原数组中x0的值，并返回索引号var bisect = d3.Bisector（function（d）{return d [0];}）。左; var index = bisect（data，x0）; //获取年份和gdp数据var年= x0; var gdp = []; for（var k = 0; k <dataset.length; k ++）{gdp [k] = {country：dataset [k] .country，value：dataset [k] .gdp [index] [index] [1]}; } //（设置提示框的标题文字（年份）title.html（“ <strong>” + Year +“ </strong>”）; //设置颜色标记的颜色descolor.style（“ background-color”，函数（d，i）{返回颜色[i];}）; //设置描述文字的内容destext.html（function（d，i）{return gdp [i] .country +“/t” +“ <strong>” <strong>“ + gdp [i] .value +“ +” </strong>'}）; //设置提示框的位置tooltip.style（“左”，（d3.event.pagex） +“ px”）.Style（“ top”，（d3.event.pagey + 20） + 20） +“ px”）; //获取垂直对齐线的x x var vlx = xscale（data [index] [0]） + padding.left; //设定垂直对齐线的起点和终点vline.attr（“ x1”，vlx）.attr（“ y1”，padding.top）.attr（“ x2”，vlx）.attr（“ y2”，height -padding.bottom）; } var markstep = 80; var gmark = svg.selectall（“。gmark”）.data（dataset）.enter（）.append（）.append（“ g”）.ATTR（“ transform”，function（d，i）{return {return {return' +（padding.left.left + ifft + i * markstep） gmark.append（“ rect”）.attr（“ x”，0）.attr（“ y”，0）.attr（“ width”，10）.attr（“高度”，10）.ATTR（“ fill”，function（d，i）{return i）{return colors [i];}）; gmark.append（“ text”）.attr（“ dx”，15）.attr（“ dy”，“ .5em”）.attr（“填充”，“ black”）.text（function（d）{return d.Country;}）; // x轴var xaxis = d3.svg.axis（）.scale（xscale）.ticks（5）.tickformat（d3.format（“ d'd”））.erient（“ bottom”）; //y轴var yaxis = d3.svg.axis（）.scale（yscale）.port（“左”）; svg.append（“ g”）.attr（“ class”，“ axis”）.attr（“ transform”，“ translate”（“ + padding.left +”，“ +（height -padding.bottom） +”）。 svg.append（“ g”）.attr（“ class”，“ y Axis”）.attr（“变换”，“ translate（” + padding.left +“，” + padding.top +“）”）.call（yaxis）;函数updatelinechart（）{this.update = function（updateData）{//xscale.domain（updatedata，function（d）{return d.Name}）; var numValues = updatedata.length; VAR UPDATECDPMAX = 0; for（var i = 0; i <updateTata.length; i ++）{var currgdp = d3.max（updateatedAta [i] .gdp，function（d）{return d d [1];}）; if（CurrGDP> UpdateCateDPMAX）UPDATAGEDPMAX = CurrGDP; } yscale = d3.scale.linear（）.domain（[0，UpdateCateDpmax * 1.1]）。 yaxis = d3.svg.axis（）.scale（yscale）.port（“左”）; svg.selectall（“ gyaxis”）.call（yaxis）; svg.selectall（“ path”）//选择<svg> <路径> .data（updateData）//绑定数据。transition（）.duration（2000）.ease（“ linearear”）.attr（“ d d”，function（d'，function（d） }}返回新的Updatelinechart（）;}刚开始数据刷新了但是坐标轴木有刷新
引入
svg.selectall（“ gyaxis”）.call（yaxis）;
以上就是d3.js实现实时刷新折线图的全部内容，希望给大家学习d3.js带来帮助。