先來看看效果圖
下面直接上源代碼，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帶來幫助。