先来看看效果图
下面直接上源代码、html文件
<html> <head> <Meta charset = "utf-8"> <title>实时刷新折线图</title> <style> .axis path、.axis line {fill：none;ストローク：黒;シェイプレンダリング：Crispeds; } .axis text {font-family：sans-serif;フォントサイズ：11px; } .overlay {fill：none;ポインターイベント：すべて; } .tooltip {width：150px;高さ：自動;位置：絶対;フォントファミリー：シムスン;フォントサイズ：16px;ラインハイト：26px;テキストアライグ：左;ボーダー：1pxソリッドブラック。背景色：白。ボーダーラジウス：5px; } .tooltip .title {border-bottom：1px solid＃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 src = "linechart.js" charset = "utf-8"> </script> <svg contentstype = "/ecmascript ="/ecmascript "" " xmlns：xlink = "http://www.w3.org/1999/xlink" zoomandpan = "magnify" style = "background-color：#ffffff;" contentStyletype = "text/css" viewbox = "0 0 2000.0 2000.0" xmidymid Meet "xmlns =" http://www.w3.org/2000/svg "バージョン=" 1.0 "> <defs> preserveaspectratio = "none meet"> </symbol> <シンボルid = "fillgage2" viewbox = "0 0 200.0 200.0" preserveaseptratio = "none meet"> </symbol> </defs> <"0" y = "" xmlns：xlink = "http://ww.w.w3.org/ xlink：href = "＃fillgage1" xlink：type = "simple" xlink：actuate = "onload" symboletype = "17" xlink：show = "embed"/> <使用x = "20" y = "20" xmlns：xlink = "http://www.w3.org/199/xlink" " xlink：href = "＃fillgage2" xlink：type = "simple" xlink：actuate = "onload" symboltype = "17" xlink：show = "embed"/> </svg> <script> dataset = [{国： "中国"、gdp：[2000,11920]、[2001,13170]、[2001,13170]、 [2003,16500]、[2004,19440]、[2005,22870]、[2006,27930]、[2007,35040]、[2008,45470]、[2009,51050]、[2010,59490]、[2011,73140]、[2012,83860]、[2011,73550]、国：「米国」、GDP：[[2000,47310]、[2001,41590]、[2002,39800]、[2003,43020]、[2004,46550]、[2005,45710]、[2006,43560]、[2007,43560]、[2008,48490]、 [2009,50350]、[2010,54950]、[2011,59050]、[2012,59370]、[2013,48980]]}]; var gauge1 = loadlinechart（ "fillgage1"、dataset）; function newValue（）{if（math.random（）> .5）{return math.round（math.random（）*100）; } else {return（math.random（）*100）.tofixed（1）; }} function refleshline（gauge1）{// alert（ "hehe"）; // document.getElementById（ "fillgage1"）。innerhtml = ""; var updatedata = [{国： "中国"、gdp：[[2000、newValue（）]、[2001、newValue（）]、[2002、newValue（）]、[2003、newValue（）]、[2004、newValue（）、[2005、newValue（）]、 [2006、newValue（）]、[2007、newValue（）]、[2008、newValue（）]、[2009、newValue（）]、[2010、newValue（）]、[2011、newValue（）]、[2012、newValue（）、[2013、newValue（）]]}、 [[2000、newValue（）]、[2001、newValue（）]、[2002、newValue（）]、[2003、newValue（）]、[2004、newValue（）]、[2005、newValue（）]、[2006、newValue（）、[2007、newValue（）]、[2008、NewValue（）]、 [2009、newValue（）]、[2010、newValue（）]、[2011、newValue（）]、[2012、newValue（）]、[2013、newValue（）]}]; gauge1.update（updatedata）; } self.setInterval（ "Reshline（Gauge1）"、5000）; </script> </body> </html>linechart.js负责加载和刷新折线图
function loadlinechart（elementid、dataset）{var svg = d3.select（ "＃" + ementid）; var strs = svg.attr（ "Viewbox"）。split（ ""）;アラート（データセット）; var width = strs [2]; var height = strs [3]; //外边框var padding = {top：50、右：50、底：50、左：50}; var names = 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 [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（names）; var xscale = d3.scale.linear（）.domain（[2000、2013]）.range（[0、width -padding.left -padding.right]）; // var xscale = d3.scale.ordinal（）// .domain（names）// .rangreoundbands（[0、width -padding.left -padding.right]）; var yscale = d3.scale.linear（）.domain（[0、gdpmax * 1.1]）。 // bar linePath = d3.svg.line（）.x（function（d）{return xscale（d [0]）;}）.y（function（d）{return yscale（d [1]）;}）.terpolate（ "base"）; //定义两个颜色var色= [d3.rgb（0、0、255）、d3.rgb（0、255、0）]; // svg.selectall（ "path"）// {Return LinePath（d.gdp）; //返回直线生成器得到的路径}）.attr（ "fill"、 "none"）.attr（ "stroke-width"、 "stroke"、function（d、i）{return colors [i];}）; //添加垂直于x // 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"、 "overlay"）.attr（ "x"、padding.left）.attr（ "y"、padding.top）.attr（ "width"、width -padth. left.padding.right）。 tooltip.style（ "left"、（d3.event.pagex） + "px"）。 vline.style（ "display"、 "none"）;（ "mousemove"、mousemove）; function mousemove（）{ / *当鼠标在透明矩形内滑动时调用 * // //获取鼠标相对于透明矩形左上角的坐标、左上角坐标为（0,0）var mousex = d3.mouse（this）[0] - padding.left; var mousey = d3.mouse（this）[1] - padding.top; //通过比例尺的反函数计算原数据中的值、例如x0为某个年份、y0为gdp var y0 = yscale.invert（mousey）; //对x0四舍五入、如果x0是2005.6、则返回2006年2005.2、则返回2005 x0 = math.round（x0）; //查找在原数组中x0的值、并返回索引号var bisect = d3.bisector（function（d）{return d [0];}）。左; var index = bisect（data、x0）; //获取年份和gdp数据var year = x0; var gdp = []; for（var k = 0; k <dataset.length; k ++）{gdp [k] = {country：dataset [k] .country、value：dataset [k] .gdp [index] [1]}; } // 设置提示框的标题文字（年份）title.html（ "<strong>" + year + "年</strong>"）; //设置颜色标记的颜色descolor.style（ "background-color"、function（d、i）{return colors [i];}）; // destext.html（function（d、i）{return gdp [i] .country + "/t" + "<strong>" + gdp [i] .value + "</strong>";}）; //设置提示框的位置Tooltip.style（ "left"、（d3.event.pagex） + "px"）.style（ "top"、（d3.event.pagey + 20） + "px"）; //获取垂直对齐线的x //设定垂直对齐线的起点和终点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（ "g"）.attr（ "transform"、function（d、i）{return "翻訳（" +（padding.（padding.） + i * markstep） + " +" + " +（height -pad.bottom + 40） +"） ";}; gmark.append（ "rect"）.attr（ "x"、0）.attr（ "y"、0）.attr（ "width"、10）.attr（ "height"、10）.attr（ "fill"、function（d、i）{return colors [i];}）; gmark.append（ "text"）.attr（ "dx"、15）.attr（ "dy"、 ".5em"）.attr（ "fill"、 "black"）.text（function（d）{return d.country;}）; // x轴var xaxis = d3.svg.axis（）.scale（xscale）.ticks（5）.tickformat（d3.format（ "d"））.orient（ "bottom"）; // y轴var yaxis = d3.svg.axis（）.scale（yscale）.orient（ "left"）; svg.append（ "g"）.attr（ "class"、 "axis"）.attr（ "transform"、 "translate（" + padding.left + "、" +（height -padding.bottom） + "）"）.call（xaxis）; svg.append（ "g"）.attr（ "class"、 "y axis"）.attr（ "transform"、 "translate（" + padding.left + "、" + padding.top + "）"）.call（yaxis）; function updatelinechart（）{this.update = function（updatedata）{//xscale.domain(updatedata、function(d)（Return D.Name}）; var数値= updatedata.length; var updategdpmax = 0; for（var i = 0; i <updatedata.length; i ++）{var currgdp = d3.max（updatedata [i] .gdp、function（d）{return d [1];}）; if（currgdp> updategdpmax）updategdpmax = currgdp; } yscale = d3.scale.linear（）.domain（[0、updategdpmax * 1.1]）.range（[height -padding.top -padding.bottom、0]）; yaxis = d3.svg.axis（）.scale（yscale）.orient（ "left"）; svg.selectall（ "gyaxis"）.call（yaxis）; svg.selectall（ "path"）// }}新しいupdatelinechart（）;}を返します刚开始数据刷新了但是坐标轴木有刷新
引入
svg.selectall（ "gyaxis"）.call（yaxis）;
以上就是d3.js、希望给大家学习d3.js带来帮助。