基于d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖
更新時(shí)間：2016年08月03日 15:07:32 投稿：daisy
本文用實(shí)例演示如何用d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。
先來(lái)看看效果圖
下面直接上源代碼，html文件
<html>
<head>
<meta charset="utf-8">
<title>實(shí)時(shí)刷新折線圖</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.overlay {
fill: none;
pointer-events: all;
}
.tooltip{
width: 150px;
height: auto;
position: absolute;
font-family: simsun;
font-size: 16px;
line-height: 26px;
text-align: left;
border: 1px solid black;
background-color: white;
border-radius: 5px;
}
.tooltip .title{
border-bottom: 1px solid #000;
text-align: center;
}
.tooltip .desColor{
width: 10px;
height: 10px;
float: left;
margin: 9px 8px 1px 8px;
}
.tooltip .desText{
display: inline;
}
.focusLine {
stroke: black;
stroke-width: 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>
<svg contentScriptType="text/ecmascript" width="2000" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" style="background-color:#ffffff;" contentStyleType="text/css" viewBox="0 0 2000.0 2000.0" height="2000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<symbol id="fillgauge1" viewBox="0 0 500.0 300.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" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fillgauge1" xlink:type="simple" xlink:actuate="onLoad" symboltype="17" height="300" xlink:show="embed"/>
<use x="20" y="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fillgauge2" xlink:type="simple" xlink:actuate="onLoad" symboltype="17" height="180" 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,103550]]
},
{
country: "usa",
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("fillgauge1",dataset);
function NewValue(){
if(Math.random() > .5){
return Math.round(Math.random()*100);
} else {
return (Math.random()*100).toFixed(1);
}
}
function refreshLine(gauge1){
//alert("hehe");
// document.getElementById("fillgauge1").innerHTML="";
var updateData =[
{
country: "china",
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()]]
},
{
country: "usa",
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()]]
}
];
gauge1.update(updateData);
}
self.setInterval("refreshLine(gauge1)",5000);
</script>
</body>
</html>
lineChart.js負(fù)責(zé)加載和刷新折線圖
function loadLineChart(elementId, dataset) {
var svg = d3.select("#" + elementId);
var strs = svg.attr("viewBox").split(" ");
alert(dataset);
var width = strs[2];
var height = strs[3];
//外邊框
var padding = {
top : 50,
right : 50,
bottom : 50,
left : 50
};
var names = new Array();
//計(jì)算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)
// .rangeRoundBands([0, width - padding.left - padding.right]);
var yScale = d3.scale.linear()
.domain([0, gdpmax * 1.1])
.range([height - padding.top - padding.bottom, 0]);
//創(chuàng)建一個(gè)直線生成器
var linePath = d3.svg.line()
.x(function (d) {
return xScale(d[0]);
})
.y(function (d) {
return yScale(d[1]);
})
.interpolate("basis");
//定義兩個(gè)顏色
var colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)];
//添加路徑
svg.selectAll("path") //選擇<svg>中所有的<path>
.data(dataset) //綁定數(shù)據(jù)
.enter() //選擇enter部分
.append("path") //添加足夠數(shù)量的<path>元素
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("d", function (d) {
return linePath(d.gdp); //返回直線生成器得到的路徑
})
.attr("fill", "none")
.attr("stroke-width", 3)
.attr("stroke", function (d, i) {
return colors[i];
});
//添加垂直于x軸的對(duì)齊線
var vLine = svg.append("line")
.attr("class", "focusLine")
.style("display", "none");
//添加一個(gè)提示框
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");
//添加一個(gè)透明的監(jiān)視鼠標(biāo)事件用的矩形
svg.append("rect")
.attr("class", "overlay")
.attr("x", padding.left)
.attr("y", padding.top)
.attr("width", width - padding.left - padding.right)
.attr("height", height - padding.top - padding.bottom)
.on("mouseover", function () {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 20) + "px")
.style("opacity", 1.0);
vLine.style("display", null);
})
.on("mouseout", function () {
tooltip.style("opacity", 0.0);
vLine.style("display", "none");
})
.on("mousemove", mousemove);
function mousemove() {
/* 當(dāng)鼠標(biāo)在透明矩形內(nèi)滑動(dòng)時(shí)調(diào)用 */
//折線的源數(shù)組
var data = dataset[0].gdp;
//獲取鼠標(biāo)相對(duì)于透明矩形左上角的坐標(biāo)，左上角坐標(biāo)為(0,0)
var mouseX = d3.mouse(this)[0] - padding.left;
var mouseY = d3.mouse(this)[1] - padding.top;
//通過(guò)比例尺的反函數(shù)計(jì)算原數(shù)據(jù)中的值，例如x0為某個(gè)年份，y0為GDP值
var x0 = xScale.invert(mouseX);
var y0 = yScale.invert(mouseY);
//對(duì)x0四舍五入，如果x0是2005.6，則返回2006；如果是2005.2，則返回2005
x0 = Math.round(x0);
//查找在原數(shù)組中x0的值，并返回索引號(hào)
var bisect = d3.bisector(function (d) {
return d[0];
}).left;
var index = bisect(data, x0);
//獲取年份和gdp數(shù)據(jù)
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]
};
}
//設(shè)置提示框的標(biāo)題文字（年份）
title.html("<strong>" + year + "年</strong>");
//設(shè)置顏色標(biāo)記的顏色
desColor.style("background-color", function (d, i) {
return colors[i];
});
//設(shè)置描述文字的內(nèi)容
desText.html(function (d, i) {
return gdp[i].country + "\t" + "<strong>" + gdp[i].value + "</strong>";
});
//設(shè)置提示框的位置
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 20) + "px");
//獲取垂直對(duì)齊線的x坐標(biāo)
var vlx = xScale(data[index][0]) + padding.left;
//設(shè)定垂直對(duì)齊線的起點(diǎn)和終點(diǎn)
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("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 numValues = 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("g.y.axis")
.call(yAxis);
svg.selectAll("path") //選擇<svg>中所有的<path>
.data(updateData) //綁定數(shù)據(jù)
.transition()
.duration(2000)
.ease("linear")
.attr("d", function (d) {
return linePath(d.gdp); //返回直線生成器得到的路徑
});
}
}
return new updateLineChart();
}
剛開(kāi)始數(shù)據(jù)刷新了但是坐標(biāo)軸木有刷新
引入
svg.selectAll("g.y.axis")
.call(yAxis);
以上就是d3.js實(shí)現(xiàn)實(shí)時(shí)刷新折線圖的全部?jī)?nèi)容，希望給大家學(xué)習(xí)d3.js帶來(lái)幫助。
相關(guān)文章
這篇文章主要介紹了淺談?shì)p量級(jí)js模板引擎simplite的簡(jiǎn)介和用法的相關(guān)資料,需要的朋友可以參考下2015-02-02
淺談JavaScript前端開(kāi)發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)
以AngularJS為代表的MVVM結(jié)構(gòu)框架或庫(kù)這兩年來(lái)在前端界真是火到不行,大有對(duì)抗傳統(tǒng)jQuery綁定思想的趨勢(shì),這里我們結(jié)合傳統(tǒng)的MVC結(jié)構(gòu),來(lái)淺談JavaScript前端開(kāi)發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)2016-06-06
基于d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖
本文用實(shí)例演示如何用d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-08-08
Highcharts 是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù), 能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。下面通過(guò)本文的介紹及實(shí)例一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
本文為大家分享了5個(gè)不錯(cuò)的javascript文件上傳插件，選擇一款功能強(qiáng)大使用簡(jiǎn)單的上傳插件將為我們節(jié)省很多開(kāi)發(fā)時(shí)間2018-09-09
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說(shuō) Highcharts 是靈活多變，細(xì)節(jié)可定制的話(huà)，那么數(shù)據(jù)列配置就是這個(gè)重要特性的核心。2016-08-08
這篇文章主要為大家介紹了JavaScript庫(kù)omit源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Three.js學(xué)習(xí)之文字形狀及自定義形狀
今天小編帶大家學(xué)習(xí)的是Three.js的文字形狀與自定義形狀，文章內(nèi)容很詳細(xì)，對(duì)大家學(xué)習(xí)Three.js或許有幫助，下面一起來(lái)看看吧。2016-08-08
組件庫(kù)Monmrepo架構(gòu)與開(kāi)發(fā)調(diào)試環(huán)境構(gòu)建詳解
這篇文章主要為大家介紹了組件庫(kù)Monmrepo架構(gòu)與開(kāi)發(fā)調(diào)試環(huán)境構(gòu)建詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本文利用實(shí)例代碼詳細(xì)介紹了一些Three.js中的幾何形狀的實(shí)現(xiàn)過(guò)程，包括立方體、平面與球體，有需要的朋友們可以學(xué)習(xí)下。2016-08-08