先来看看效果图
下面直接上源代码， html 文件
<html> <head> <meta charset = "utf-8"> <title> 实时刷新折线图 </title> <style> .Axis Path, .axis line {เติม: ไม่มี; โรคหลอดเลือดสมอง: ดำ; การเรนเดอร์รูปร่าง: Crispedges; } .axis text {font-family: sans-serif; ขนาดตัวอักษร: 11px; } .Overlay {เติม: ไม่มี; Eventer-events: ทั้งหมด; } .ToolTip {WIDTH: 150PX; ความสูง: อัตโนมัติ; ตำแหน่ง: สัมบูรณ์; Font-Family: Simsun; ขนาดตัวอักษร: 16px; ระดับความสูง: 26px; TEXT-ALIGN: ซ้าย; ชายแดน: 1px Solid Black; พื้นหลังสี: สีขาว; แนวชายแดน: 5px; } .ToolTip .Title {ขอบด้านล่าง: 1PX SOLID #000; TEXT-ALIGN: CENTER; } .ToolTip .Descolor {WIDTH: 10PX; ความสูง: 10px; ลอย: ซ้าย; มาร์จิ้น: 9px 8px 1px 8px; } .toolTip .Destext {display: inline; } .focusline {stroke: black; จังหวะจังหวะ: 1px; Stroke-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> xmlns: xlink = "http://www.w3.org/1999/xlink" zoomandpan = "magnify" style = "พื้นหลัง-สี: #ffffff;" contentStyleType = "text/css" viewbox = "0 0 2000.0 2000.0" serventeaspectratio = "xmidymid พบกัน" xmlns = "http://www.w3.org/2000/svg" เวอร์ชัน = "1.0"> <defs> serveSpectratio = "ไม่มี MEET"> </symbol> <symbol id = "FillGaUge2" viewbox = "0 0 200.0 200.0" serventaspectratio = "ไม่มีการพบปะกัน"> </symbol> </defs> <ใช้ x = "0" y = "0" xmlns: xlink = "http:// xlink: href = "#fillgauge1" xlink: type = "simple" xlink: actuate = "onload" symboltype = "17" xlink: show = "embed"/> <ใช้ x = "20" y = "20" xmlns: xlink = "http:/// xlink: href = "#fillgauge2" xlink: type = "simple" xlink: actuate = "onload" symboltype = "17" xlink: show = "ฝัง"/> </svg> <script> dataSet = [ประเทศ: "จีน", GDP: [2000,11920] [2003,16500], [2004,19440], [2005,22870], [2006,27930], [2007,35040], [2008,45470], [2009,51050], [2010,59490] ประเทศ: "USA", GDP: [[2000,47310], [2001,41590], [2002,39800], [2003,43020], [2004,46550], [2005,45710], [2006,43560], [2007,43560] [2009,50350], [2010,54950], [2011,59050], [2012,59370], [2013,48980]]}]; var gauge1 = loadlineChart ("FillGauge1", ชุดข้อมูล); ฟังก์ชั่น newValue () {if (math.random ()> .5) {return math.round (math.random ()*100); } else {return (math.random ()*100) .tofixed (1); }} ฟังก์ชัน Refreshline (GAUGE1) {// Alert ("hehe"); // document.getElementById ("FillGauge1"). 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 () [2009, newValue ()], [2010, newValue ()], [2011, newValue ()], [2012, newValue ()], [2013, newValue ()]}]; GAUGE1.UPDATE (UPDATEDATA); } self.setInterval ("Refreshline (GAUGE1)", 5000); </script> </body> </html>linechart.js 负责加载和刷新折线图
ฟังก์ชั่น loadLineChart (elementId, ชุดข้อมูล) {var svg = d3.Select ("#" + elementId); var strs = svg.attr ("viewbox"). แยก (""); การแจ้งเตือน (ชุดข้อมูล); var width = strs [2]; ความสูง var = strs [3]; // 外边框 var padding = {top: 50, ขวา: 50, ด้านล่าง: 50, ซ้าย: 50}; ชื่อ var = new Array (); // 计算 gdp 的最大值 var gdpmax = 0; สำหรับ (var i = 0; i <dataset.length; i ++) {var currgdp = d3.max (ชุดข้อมูล [i] .gdp, ฟังก์ชัน (d) {return d [1];}); if (currgdp> gdpmax) gdpmax = currgdp; } var gdpnumb = ชุดข้อมูล [0] .gdp.length; สำหรับ (var j = 0; j <gdpnumb; j ++) {ชื่อ [j] = (ชุดข้อมูล [0] .gdp [j]) [0]; } Alert (ชื่อ); var xscale = d3.scale.linear () .domain ([2000, 2013]) .Range ([0, Width - Padding.left - Padding.right]); // var xscale = d3.scale.ordinal () // .domain (ชื่อ) // .rangeroundbands ([0, ความกว้าง - padding.left - padding.right]); var yscale = d3.scale.linear () .domain ([0, gdpmax * 1.1]) .Range ([ความสูง - padding.top - padding.bottom, 0]); // 创建一个直线生成器 var linepath = d3.svg.line () .x (ฟังก์ชัน (d) {return xscale (d [0]);}) .y (ฟังก์ชัน (d) {return yscale (d [1]);}) .interpolate ("พื้นฐาน"); // 定义两个颜色 var colours = [d3.rgb (0, 0, 255), d3.rgb (0, 255, 0)]; // 添加路径 svg.selectall ("path") // 选择 <svg> 中所有的 <path> .data (ชุดข้อมูล) // 绑定数据 .enter () // 选择ป้อน部分 .append ("path") // 添加足够数量的 <path> 元素 .attr ("transform" {return linepath (d.gdp); // 添加垂直于 x 轴的对齐线 var vline = svg.append ("บรรทัด") .attr ("คลาส", "โฟกัส") .style ("แสดง", "ไม่มี"); // 添加一个提示框 var tooltip = d3.select ("body") .append ("div") .attr ("คลาส", "tooltip") .style ("ความทึบ", 0.0); var title = tooltip.append ("div") .attr ("คลาส", "title"); var des = tooltip.selectall (". des") .Data (ชุดข้อมูล) .ENTER () .Append ("div"); var descolor = des.append ("div") .attr ("คลาส", "descolor"); var destext = des.append ("div") .attr ("คลาส", "destext"); // 添加一个透明的监视鼠标事件用的矩形 svg.append ("rect") .attr ("คลาส", "ซ้อนทับ") .attr ("x", padding.left) .attr ("y", padding.top) .attr ("ความกว้าง", ความกว้าง - padding.left - right Tooltip.style ("ซ้าย", (d3.event.pagex) + "px") .style ("top", (d3.event.pagey + 20) + "px"). Style ("opacity", 1.0); vline.style ("แสดง", "ไม่มี"); ฟังก์ชั่น mousemove () { / * 当鼠标在透明矩形内滑动时调用 * /// 折线的源数组 var data = ชุดข้อมูล [0] .gdp; // 获取鼠标相对于透明矩形左上角的坐标， 左上角坐标为 (0,0) var mousex = d3.mouse (สิ่งนี้) [0] - padding.left; var mousey = d3.mouse (นี่) [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 (ฟังก์ชั่น (d) {return d [0];}). ซ้าย; ดัชนี var = bisect (data, x0); // 获取年份和 GDP 数据 VAR ปี = x0; var gdp = []; สำหรับ (var k = 0; k <dataset.length; k ++) {gdp [k] = {ประเทศ: ชุดข้อมูล [k] .country, ค่า: ชุดข้อมูล [k] .gdp [ดัชนี] [1]}; } // 设置提示框的标题文字（年份） title.html ("<strong>" + ปี + "年 </strong>"); // 设置颜色标记的颜色 descolor.style ("พื้นหลังสี", ฟังก์ชั่น (d, i) {return colors [i];}); // 设置描述文字的内容 destext.html (ฟังก์ชั่น (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 (ข้อมูล [ดัชนี] [0]) + padding.left; // 设定垂直对齐线的起点和终点 vline.attr ("x1", vlx) .attr ("y1", padding.top) .attr ("x2", vlx) .attr ("y2", ความสูง - padding.bottom); } var markstep = 80; var gmark = svg.selectall (". gmark") .Data (ชุดข้อมูล) .ENTER () .Append ("g") .attr ("แปลง", ฟังก์ชั่น (d, i) {return "แปล (" + (padding.left + i * markstep) + "," gmark.append ("rect") .attr ("x", 0) .attr ("y", 0) .attr ("ความกว้าง", 10) .attr ("ความสูง", 10) .attr ("เติม", ฟังก์ชั่น (d, i) {สีคืน [i];}); gmark.append ("text") .attr ("dx", 15) .attr ("dy", ".5em") .attr ("เติม", "ดำ") .Text (ฟังก์ชั่น (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 ("คลาส", "แกน") .attr ("แปลง", "แปล (" + padding.left + "," + (ความสูง - padding.bottom) + ")") .call (xaxis); svg.append ("g") .attr ("คลาส", "แกน y") .attr ("แปลง", "แปล (" + padding.left + "," + padding.top + ")"). call (yaxis); ฟังก์ชั่น updateLineChart () {this.update = function (updatedata) {//xscale.domain(updatedata,function(d) {ส่ง D.Name}); var numValues = updatedata.length; var updateDpMax = 0; สำหรับ (var i = 0; i <updatedata.length; i ++) {var currgdp = d3.max (updatedata [i] .gdp, ฟังก์ชัน (d) {return d [1];}); if (currgdp> updateDpMax) updateGedDpMax = currgdp; } yscale = d3.scale.linear () .domain ([0, updateDpmax * 1.1]) .Range ([ความสูง - 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", ฟังก์ชั่น (d) {return linepath (d.gdp); }} ส่งคืน updateLineChart ใหม่ ();}刚开始数据刷新了但是坐标轴木有刷新
引入
svg.selectall ("gyaxis"). call (yaxis);以上就是 d3.js 实现实时刷新折线图的全部内容， 希望给大家学习 d3.js 带来帮助。