先来看看效果图
下面直接上源代码、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带来帮助。