d3.js 刷新折线图（包括坐标轴及路径的刷新及信息点提示）

来源：互联网发布：期货和股票的区别知乎编辑：程序博客网时间：2024/04/30 14:59

接上篇的的刷新折线图的样例，增加了信息点的显示以及坐标轴的更新。坐标轴的时间更新的应用可用于做历史曲线等曲线图。在这里碰到的问题是

在mircrosoft Edge下运行完美。但是在chrome下出现刻度线缺失情况。百思不得其解。先上运行结果图：

html文件

<html>    <head>          <meta charset="utf-8">          <title>实时刷新折线图</title>  <link rel="stylesheet" type="text/css" href="d3LineChart.css"><script src="jquery-1.10.2.min.js" type="text/javascript"></script><script src="jquery.tipsy.js" type="text/javascript"></script><link href="tipsy.css" rel="stylesheet" type="text/css" />  <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 id="fillgauge1" contentScriptType="text/ecmascript" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" style="background-color:#ffffff;" contentStyleType="text/css" viewBox="0 0 500.0 300.0" height="300" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0"></svg><script>  var t=new Date();var timenow=t.getTime(); var dataset = [{country: "UK",gdp: [[timenow-4000,NewValue()],[timenow-3000,NewValue()],[timenow-2000,NewValue()],[timenow-1000,NewValue()],[timenow,NewValue()]]},{country: "usa",gdp: [[timenow-4000,NewValue()],[timenow-3000,NewValue()],[timenow-2000,NewValue()],[timenow-1000,NewValue()],[timenow,NewValue()]]}];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){    var nowDate=new Date();    var refreshtimenow=nowDate.getTime(); var updateData =[{country: "china",gdp: [[refreshtimenow-4000,NewValue()],[refreshtimenow-3000,NewValue()],[refreshtimenow-2000,NewValue()],[refreshtimenow-1000,NewValue()],[refreshtimenow,NewValue()]]},{country: "usa",gdp: [[refreshtimenow-4000,NewValue()],[refreshtimenow-3000,NewValue()],[refreshtimenow-2000,NewValue()],[refreshtimenow-1000,NewValue()],[refreshtimenow,NewValue()]]}    ];gauge1.update(updateData);}self.setInterval("refreshLine(gauge1)",4000);</script> </body></html>

用于刷新和载入的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,right : 50,bottom : 50,left : 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 timemax = 0;var timemin = 0;for (var i = 0; i < dataset.length; i++) {var currMaxTime = d3.max(dataset[i].gdp, function (d) {return d[0];});var currMinTime = d3.min(dataset[i].gdp, function (d) {return d[0];});if (currMaxTime > timemax) {timemax = currMaxTime;}timemin = currMinTime;}var xScale = d3.time.scale().domain([new Date(timemin), new Date(timemax)]).range([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("basis");//定义两个颜色var colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)];//添加路径svg.selectAll("path") //选择<svg>中所有的<path>.data(dataset) //绑定数据.enter() //选择enter部分.append("path") //添加足够数量的<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];});var dataCirclesGroup = null;dataCirclesGroup = svg.append('svg:g');dataCirclesGroup.attr("transform", "translate(" + padding.left + "," + padding.top + ")");var chinaData = dataset[1].gdp.concat(dataset[0].gdp);dataCirclesGroup.selectAll('circle').data(chinaData).enter().append('svg:circle').attr('class', 'data-point').attr('cx', function (d) {return xScale(d[0]);}).attr('cy', function (d) {return yScale(d[1]);}).attr('r', 4);//规定提示框中时间的格式function formatDate(now) {var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();var minsecond = now.getMilliseconds();return hour + ":" + minute + ":" + second + ":" + minsecond;}$('svg circle').tipsy({gravity : 'w',html : true,title : function () {var d = this.__data__;var pDate = new Date(d[0]);return 'Date: ' + formatDate(pDate) + '<br>Value: ' + d[1];}});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.time.format("%H:%M:%S"))//.tickSize(10).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) {var timemax = 0;var timemin = 0;var chData = updateData[1].gdp.concat(updateData[0].gdp);for (var i = 0; i < updateData.length; i++) {var currMaxTime = d3.max(updateData[i].gdp, function (d) {return d[0];});var currMinTime = d3.min(updateData[i].gdp, function (d) {return d[0];});if (currMaxTime > timemax) {timemax = currMaxTime;}timemin = currMinTime;}xScale = d3.time.scale().domain([new Date(timemin), new Date(timemax)]).range([0, width - padding.left - padding.right]);xAxis = d3.svg.axis().scale(xScale).ticks(5).tickFormat(d3.time.format("%H:%M:%S")).orient("bottom");svg.selectAll("g.axis").call(xAxis);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) //绑定数据.transition().duration(2000).ease("linear").attr("d", function (d) {return linePath(d.gdp); //返回直线生成器得到的路径});dataCirclesGroup.selectAll('circle').data(chData).transition().duration(2000).attr('cx', function (d) {return xScale(d[0])}).attr('cy', function (d) {return yScale(d[1])}).attr('r', 4);}}return new updateLineChart();}

下面上在谷歌下的运行结果：

坐标轴成了这个熊样子了，求高手解答

0 0