先来看看效果图
下面直接上源代码 ， html 文件
<html> <head> <meta charset = "utf-8"> <Title> 实时刷新折线图 </title> <style>. ход: черный; Ремендинг формы: Crispedges; }. размер шрифта: 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 {ход: черный; ширина инсульта: 1PX; инсульт-Dasharray: 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 contentscriptype = "eCmaScript" xmlns: xlink = "http://www.w3.org/1999/xlink" Zoomandpan = "Magnify" style = "фоновый цвет: #ffffff;" ContentStyleType = "text/css" viewbox = "0 0 2000.0 2000.0" reserveaspectratio = "xmidymid meet" xmlns = "http://www.w3.org/2000/svg" версия = "1,0"> <Fec> <Symbol Id = "Fillgauge1" ViewBox = "0 500. geserveaspectratio = "none vide"> </symbol> <symbol id = "fillgauge2" viewbox = "0 200.0 200.0" storererveaspectratio = "none meet"> </symbol> </defs> <use x = "0" y = "0" xmlns: xlink = "http://www.w3. ". 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" http://www.w3.org/1999/xlink "/http://www.w3.org/1999/xlink"/http://www.w3. xlink: href = "#fillgauge2" xlink: type = "simple" xlink: actuate = "onload" symboltype = "17" xlink: show = "Embed"/> </svg> <script> var Dataset = [{страна: "Китай", GDP: [2000,11920], [200145070705505050505505014, [2000,11920], [2001,1450514. [2003,16500], [2004,19440], [2005,22870], [2004, 27930], [2007,35040], [2008,45470], [2009,51050], [2010,59490], [2011, 73140], [2012,83860], [2011,73140], [2012,83860], [2011,73140], [2012,83860], [2011,73140], [2012,83860], [2011,73140], [2012,83860], [2011,73140], [2012,83860], [2011,73140], [2012,83860], [2011,73140]. «США», ВВП: [[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] [2009,50350], [2010 54950], [2011,59050], [2012,59370], [2013,48980]]}]; var gailge1 = loadlineChart («Fillgauge1», Dataset); function newValue () {if (math.random ()> .5) {return math.round (math.random ()*100); } else {return (math.random ()*100) .tofixed (1); }} function refreshline (kailge1) {// alert ("hehehe"); // document.getElementbyId ("fillgauge1"). innerhtml = ""; var updatedata = [{страна: «Китай», ВВП: [[2000, NewValue ()], [2001, NewValue ()], [2002, NewValue ()], [2003, NewValue ()], [2004, NewValue ()], [2005, NewValue ()],], [2004, NewValue (), [2005, NewValue (),], [2004, NewValue (), [2005, NewValue ()], [2006, NewValue ()], [2007, NewValue ()], [2008, NewValue ()], [2009, NewValue ()], [2010, NewValue ()], [2011, NewValue ()], [2012, NewValue ()], [2013, NewValue ()]]}, {Страна: ", USA", gdp: gdp: gd: ar [[2000, NewValue ()], [2001, NewValue ()], [2002, NewValue ()], [2003, NewValue ()], [2004, NewValue ()], [2005, NewValue ()], [2006, NewValue ()], [2007, NewValue (), [2008, [2008 [2009, NewValue ()], [2010, NewValue ()], [2011, NewValue ()], [2012, NewValue ()], [2013, NewValue ()]]}]; kaile1.Update (updatedata); } self.setInterval ("refreshline (kailge1)", 5000); </script> </body> </html>linechart.js 负责加载和刷新折线图
function LoadLineChart (elementId, DataSet) {var svg = d3.select ("#" + elementId); 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] = (набор данных [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) // .rangeroundbands ([0, width - padding.left - padding.right]); var yscale = d3.scale.linear () .domain ([0, gdpmax * 1.1]) .range ([height - padding.top - padding.bottom, 0]); // 创建一个直线生成器 var linepath = d3.svg.line () .x (function (d) {return xscale (d [0]);}) .y (function (d) {return yscale (d [1]);}) .Interpolate ("base"); // 定义两个颜色 var colors = [d3.rgb (0, 0, 255), d3.rgb (0, 255, 0)]; // 添加路径 svg.selectall ("path") // 选择 <svg> 中所有的 <path> .data (dataSet) // 绑定数据 .Enter () // 选择 Enter 部分 .Append ("path") // 添加足够数量的 <Thap> 元素 .Attr ("Transform", "Transtate (" + Padling.Left + "," + Padd. {return linepath (d.gdp); // 添加垂直于 x 轴的对齐线 var vline = svg.append ("line") .Attr ("class", "focusline") .Style ("Display", "none"); // 添加一个提示框 var tooltip = d3.select ("body") .append ("div") .Attr ("class", "tooltip") .Style ("непрозрачность", 0,0); var title = tooltip.append ("div") .attr ("class", "title"); var des = tooltip.selectall (". des") .data (dataSet) .Enter () .append ("div"); var incoolor = des.Append ("div") .attr ("class", "discolor"); 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 - padding.left - padding.right) .Attr («Высот», высота - Padding.Top.dding.BottOm). Tooltip.style («Левый», (d3.event.pagex) + «px») .style («Верх», (d3.event.pagey + 20) + «px») .style («Непрозрачность», 1,0); vline.style ("Display", "none"); function mouseMove () { / * 当鼠标在透明矩形内滑动时调用 * /// 折线的源数组 var data = dataSet [0] .gdp; // 获取鼠标相对于透明矩形左上角的坐标 ， 左上角坐标为 (0,0) var mousex = d3.mouse (это) [0] - padding.left; var mousey = d3.mouse (this) [1] - padding.top; // 通过比例尺的反函数计算原数据中的值 ， 例如 x0 为某个年份 ， y0 为 GDP 值 var x0 = xscale.invert (mousex); var y0 = yscale.invert (мыши); // 对 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); // 获取年份和 ВВП 数据 var Год = x0; var gdp = []; for (var k = 0; k <dataSet.length; k ++) {gdp [k] = {страна: набор данных [k] .country, значение: набор данных [k] .gdp [index] [1]}; } // 设置提示框的标题文字 (年份 年份） title.html ("<strong>" + Год + "年 </strong>"); // 设置颜色标记的颜色 incoolor.style ("фоновое цвета", функция (d, i) {return colors [i];}); // 设置描述文字的内容 destext.html (function (d, i) {return gdp [i] .country + "/t" + "<strong>" + gdp [i] .value + "</strong>";}); // 设置提示框的位置 Tooltip.Style («слева», (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 (dataSet) .Enter () .Append ("g") .attr ("transform", function (d, i) {return "translate (" + (padding.left + i * markstep) + "," + (height - padding.bottom + 40) + ")";}); gmark.append ("rect") .attr ("x", 0) .attr ("y", 0) .attr ("width", 10) .attr ("высота", 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 ("внизу"); // y 轴 var yaxis = d3.svg.axis () .scale (yscale) .Orient ("слева"); svg.append ("g") .attr ("class", "axis") .attr ("transform", "translate (" + padding.left + "," + (высота - 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 numvalues = updatedata.length; var UpdateAgeDpmax = 0; for (var i = 0; i <updatedata.length; i ++) {var currgdp = d3.max (updatedata [i] .gdp, function (d) {return d [1];}); if (currgdp> updategedpmax) UpdateAgeDpmax = currgdp; } yscale = d3.scale.linear () .domain ([0, UpdategeDpmax * 1.1]) .range ([height - padding.top - padding.bottom, 0]); yaxis = d3.svg.axis () .scale (yscale) .Orient ("слева"); svg.selectall ("gyaxis") .call (yaxis); svg.selectall ("path") // 选择 <svg> 中所有的 <path> .data (updatedata) // 绑定数据 .transition () .duration (2000) .ease ("linear") .attr ("d", function (d) {return linepath (d.gdp); //}); }} return new UpdateLineChart ();}刚开始数据刷新了但是坐标轴木有刷新
引入
svg.selectall ("gyaxis") .call (yaxis);以上就是 d3.js 实现实时刷新折线图的全部内容 希望给大家学习 d3.js 带来帮助。