先来看看效果图
下面直接上源代码 ， html 文件
<html> <éadfr> <meta charset = "utf-8"> <itle> 实时刷新折线图 </title> <style> .Axis path, .axis line {fill: non; TRAP: noir; Rendre de forme: Crisppeds; } .Axis Text {Font-Family: Sans-Serif; taille de police: 11px; } .Overlay {fill: aucun; Pointer-Events: Tous; } .tooltip {width: 150px; Hauteur: Auto; Position: absolue; Font-Family: Simsun; taille de police: 16px; hauteur de ligne: 26px; Texte-aligne: gauche; Border: 1px noir solide; Color d'arrière-plan: blanc; Border-Radius: 5px; } .tooltip .title {border-bottom: 1px solide # 000; Texte-aligne: Centre; } .tooltip .descolor {width: 10px; hauteur: 10px; flottant: à gauche; marge: 9px 8px 1px 8px; } .tooltip .Destext {display: inline; } .focusline {trait: noir; largeur de course: 1px; Dasharray AVC: 5,5; } </ style> </ head> <body> <script src = "http://d3js.org/d3.v3.js" charset = "utf-8"> </cript> <script src = "linechart.js" charset = "utf-8"> </cript> <svg ContentscriptType = "text / ecmascript" xmlns: xlink = "http://www.w3.org/1999/xLink" zoomandpan = "magazie" style = "background-Color: #ffffff;" ContentStyletype = "Text / CSS" ViewBox = "0 0 2000.0 2000.0" PreservasPectratio = "XmidyMID Meet" xmlns = "http://www.w3.org/2000/svg" version = "1.0"> <defS> <symbol id = "fillgauge1" Viewbox = "0 0 500.0.0.0" preserveAspectRatio="none meet"></symbol><symbol id="fillgauge2" viewBox="0 0 200.0 200.0" preserveAspectRatio="none meet"></symbol></defs><use x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink: href = "# fillgauge1" xlink: type = "simple" xlink: actuate = "onload" symboltype = "17" xlink: show = "embed" /> <use x = "20" y = "20" xmlns: xlink = "http://www.w3.org/1999/xlink" " xlink:href="#fillgauge2" xlink:type="simple" xlink:actuate="onLoad" symboltype="17" xlink:show="embed"/></svg><script> var dataset = [ { country: "china", gdp: [[2000,11920],[2001,13170],[2002,14550], [2003,16500], [2004,19440], [2005,22870], [2006,27930], [2007,35040], [2008,45470], [2009,51050], [2010,59490], [2011,73140], [2012,83860], [2013,103555555 "USA", PIB: [[2000 47310], [2001 41590], [2002,39800], [2003 43020], [2004 46550], [2005,45710], [2006,43560], [2007,43560], [2008 48490],,, [2007,43560], [2008 48490],,, [2007,43560], [2008 48490],,, [2007,43560], [2008 48490],,,, [2007,43560], [2008 48490],,,, [2007,43560], [2008 48490],,,, [2007,43560], [2008 48490],,,, [2009 50350], [2010 54950], [2011 59050], [2012 59370], [2013 48980]]}]; var Gauge1 = LoadLineChart ("FillGauge1", ensemble de données); fonction newValue () {if (math.random ()> .5) {return math.round (math.random () * 100); } else {return (math.random () * 100) .tofixed (1); }} Fonction Refreshline (Gauge1) {// alert ("hehe"); // document.getElementById ("FillGauge1"). innerHtml = ""; var updatedata = [{country: "China", PIB: [[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()]] }, { country: "usa", gdp: [[2001 [2009, newValue ()], [2010, newValue ()], [2011, newValue ()], [2012, newValue ()], [2013, newValue ()]]}]; Gauge1.update (UpdatedAdAta); } self.setInterval ("Refreshline (GAUGE1)", 5000); </cript> </body> </html>linechart.js 负责加载和刷新折线图
Function LoadLineChart (eleMedId, DataSet) {var svg = d3.Select ("#" + elementId); var strS = svg.attr ("Viewbox"). Split (""); alerte (ensemble de données); var largeur = strs [2]; var hauteur = strs [3]; // 外边框 var padding = {top: 50, à droite: 50, en bas: 50, à gauche: 50}; var noms = new Array (); // 计算 PIB 的最大值 var gdpmax = 0; for (var i = 0; i <dataSet.length; i ++) {var currgdp = d3.max (ensemble de données [i] .gdp, fonction (d) {return d [1];}); if (currgdp> gdpmax) gdpmax = currgdp; } var gdpNumb = ensemble de données [0] .gdp.length; pour (var j = 0; j <gdpNumb; j ++) {noms [j] = (ensemble de données [0] .gdp [j]) [0]; } alert (noms); var xscale = d3.scale.linear () .domain ([2000, 2013]) .Range ([0, largeur - padding.left - padding.Right]); // var xscale = d3.scale.ordinal () // .domain (noms) // .rangeroundbands ([0, largeur - padding.left - padding.Right]); var yscale = d3.scale.linear () .domain ([0, gdpmax * 1.1]) .Range ([hauteur - padding.top - padding.bottom, 0]); // 创建一个直线生成器 var linePath = d3.svg.line () .x (fonction (d) {return xscale (d [0]);}) .y (fonction (d) {return yscale (d [1]);}) .interpolate ("base"); // 定义两个颜色 var couleurs = [d3.rgb (0, 0, 255), d3.rgb (0, 255, 0)]; // 添加路径 svg.selectall ("path") // 选择 <svg> 中所有的 <ath> .data (ensemble de données) // 绑定数据 .enter () // 选择 entrez 部分 .Apnd ("path") // 添加足够数量的 <AtHt> 元素 .Attr ("Transform", "Translate (" + padding.left + "," + padding. {return LinePath (d.gdp); // 添加垂直于 x 轴的对齐线 var vline = svg.append ("line") .attr ("class", "focusline") .style ("affiche", "aucun"); // 添加一个提示框 var tooltIp = d3.Select ("body") .append ("div") .attr ("class", "tooltp") .style ("opacité", 0.0); var title = toolTip.append ("div") .attr ("class", "title"); var des = toolTip.selectall (". des") .data (ensemble de données) .enter () .append ("div"); var descolor = des.append ("div") .attr ("class", "descolor"); var destExt = des.append ("div") .attr ("class", "destExt"); // 添加一个透明的监视鼠标事件用的矩形 svg.append ("rect") .attr ("class", "superlay") .attr ("x", padding.left) .attr ("y", padding.top) .attr ("width", width - padding.left - padding.right) .attr ("width", hauteur - top-top-padding.bottom). ToolTip.Style ("Left", (D3.Event.Pagex) + "PX") .STYLE ("TOP", (D3.Event.Pagey + 20) + "PX") .STYLE ("Opacity", 1.0); vline.style ("affichage", "Aucun");}) .on ("MouseMove", MouseMove); Fonction MouSEMOVE () {/ * 当鼠标在透明矩形内滑动时调用 * / // 折线的源数组 Var Data = DataSet [0] .gdp; // 获取鼠标相对于透明矩形左上角的坐标 ， 左上角坐标为 (0,0) var mousex = d3.mouse (this) [0] - padding.left; var mousey = 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 ， 则返回 2005 x0 = math.round (x0); // 查找在原数组中 x0 的值 ， 并返回索引号 var bisect = d3.bisector (fonction (d) {return d [0];}). Left; var index = bisect (data, x0); // 获取年份和 PIB 数据 var année = x0; var PIB = []; for (var k = 0; k <dataSet.length; k ++) {gdp [k] = {country: jeu de données [k] .Country, valeur: jeu de données [k] .gdp [index] [1]}; } // 设置提示框的标题文字 （年份） title.html ("<strong>" + année + "年 </strong>"); // 设置颜色标记的颜色 descolor.style ("background-color", function (d, i) {return couleurs [i];}); // 设置描述文字的内容 destExt.html (fonction (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 坐标 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 (ensemble de données) .enter () .Apnd ("g") .attr ("transform", fonction (d, i) {return "tradlate (" + (padding.left + i * markstep) + "," + (hauteur - padding.bottom + 40) + ")";}); gmark.append ("rect") .attr ("x", 0) .attr ("y", 0) .attr ("width", 10) .attr ("height", 10) .attr ("fill", function (d, i) {return couleurs [i];}); gmark.append ("text") .attr ("dx", 15) .attr ("dy", ".5em") .attr ("fill", "noir") .text (function (d) {return d.country;}); // x 轴 var xaxis = d3.svg.axis () .scale (xscale) .Ticks (5) .TickFormat (d3.format ("d")) .orient ("inférieur"); // y 轴 var yaxis = d3.svg.axis () .scale (yscale) .orient ("gauche"); svg.append ("g") .attr ("class", "axe") .attr ("transform", "tradlate (" + padding.left + "," + (height - padding.bottom) + ")") .call (xaxis); svg.append ("g") .attr ("class", "y axis") .attr ("transform", "tradlate (" + padding.left + "," + padding.top + ")") .call (yaxis); fonction updateLineChart () {this.update = function (updatedata) {//xscale.domain(updateData,function(d){return d.name}); var numvalues = updatedata.length; var updatetegdpmax = 0; for (var i = 0; i <updatedata.length; i ++) {var currgdp = d3.max (updatedata [i] .gdp, function (d) {return d [1];}); if (currgdp> updategatedpmax) updategatedpmax = currgdp; } yscale = d3.scale.linear () .domain ([0, updatetegdpmax * 1.1]) .Range ([hauteur - padding.top - padding.bottom, 0]); yaxis = d3.svg.axis () .scale (yscale) .orient ("gauche"); svg.selectall ("gyaxis") .Call (yaxis); svg.selectall ("path") // 选择 <svg> 中所有的 <ath> .data (updatedata) // 绑定数据 .transition () .Duration (2000) .Ease ("linéaire") .attr ("d", fonction (d) {return LinePath (d.gdp); // 返回直线生成器得到的路径}); }} Renvoie un nouveau UpdateLineChart ();}刚开始数据刷新了但是坐标轴木有刷新
引入
svg.selectall ("gyaxis") .Call (yaxis);以上就是 D3.JS 实现实时刷新折线图的全部内容 ， 希望给大家学习 D3.JS 带来帮助。