d3.js линия диаграммы перетекает YAxis

Изображение моей проблемы: http://hpics.li/c012dca d3.js линия диаграммы перетекает YAxis

Это «живой» диаграммы. Он получает данные от databse & нарисовать его. Я изменил x.domain, чтобы иметь всего 30 секунд захвата.

Но у меня переполнение по оси Y.

Вот мой код:

$(document).ready(function(){ 
 

 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
 
    \t width = 1000 - margin.left - margin.right, 
 
    \t height = 380 - margin.top - margin.bottom; 
 
\t 
 
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 
 
    
 
var formatTime = d3.time.format("%H:%M:%S"); 
 
    
 
var x = d3.time.scale().range([0, width]); 
 
    
 
var y = d3.scale.linear().range([height, 0]); 
 
    
 
var xAxis = d3.svg.axis() 
 
    \t .scale(x) 
 
    \t .orient("bottom") 
 
\t .tickFormat(d3.time.format("%H:%M:%S")) 
 
\t .ticks(5); 
 
    
 
var yAxis = d3.svg.axis() 
 
    \t .scale(y) 
 
    \t .orient("left") 
 
\t .ticks(5); 
 
    
 
var line = d3.svg.line() 
 
\t .interpolate('linear') 
 
    \t .x(function(d) { return x(d.timestamp); }) 
 
    \t .y(function(d) { return y(d.value); }) 
 
    \t ; 
 
\t 
 

 

 
var svg = d3.select("#graphbpm").append("svg") 
 
    \t .attr("width", width) 
 
    \t .attr("height", height + margin.top + margin.bottom) 
 
    \t .append("g") 
 

 
    \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 

 
d3.json("./data.php", function(error,data) { 
 
    data.forEach(function(d) { 
 
    d.timestamp = d.timestamp; 
 
    d.value = +d.value; 
 

 
    }); 
 

 

 
x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]); 
 
y.domain([0,d3.max(data, function(d) { return d.value; })]); 
 

 

 

 

 
    \t \t 
 
svg.append("g") 
 
\t .attr("class", "x axis") 
 
\t .attr("transform", "translate(0," + height + ")") 
 
\t .call(xAxis) 
 
\t .append("text") 
 
\t .attr("x", 500) 
 
\t .attr("y", -5) 
 
\t .style("text-anchor", "middle") 
 
\t .text("(TIME)"); 
 
    
 
svg.append("g") 
 
\t .attr("class", "y axis") 
 
\t .call(yAxis) 
 
\t .append("text") 
 
\t .attr("transform", "rotate(-90)") 
 
\t .attr("y", 6) 
 
\t .attr("dy", ".71em") 
 
\t .style("text-anchor", "end") 
 
\t .text("(LIVE)"); 
 

 
svg.append("path") 
 
\t .attr("class","line") 
 
\t .attr("d",line(data)) 
 
; 
 

 
var pathl = svg.append("g") 
 
    \t .attr("clip-path", "url(#clip)") 
 
    \t .append("path") 
 
    \t .data(data) 
 
    \t .attr("class", "line") 
 
\t .attr("fill","pink"); 
 

 
    
 
var inter = setInterval(function() { \t 
 
updateData(); 
 
}, 2000); \t \t 
 
}); 
 

 
    
 
function updateData() 
 
{ 
 
d3.json("./data.php", function(data) { 
 
data.forEach(function(d) { 
 
\t d.timestamp = d.timestamp; 
 
\t d.value = +d.value; 
 

 
}); 
 
    
 

 
data.push(data); 
 
x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]); 
 
y.domain([0,d3.max(data, function(d) { return d.value; })]); 
 
    
 

 

 
svg.select("path.line") 
 
\t .attr("d", line(data)) 
 
    \t .transition(); 
 

 
\t 
 
svg.select(".x.axis") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .call(xAxis); 
 
\t \t 
 

 
svg.select(".y.axis") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .call(yAxis); 
 

 
\t 
 
svg.select("pathl") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .attr("transform", "translate(" + x(0) + ")"); 
 

 
svg.select("dot") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .attr("transform", "translate(" + x(0) + ")"); 
 

 
\t 
 

 
data.shift(); 
 

 
    
 
}); 
 
}; 
 
f 
 
});

#graphbpm { 
 
\t background-color:#fff; 
 
\t width:600px; 
 
\t height:450px; 
 
} 
 
#graphgsr { 
 
\t background-color:#fff; 
 
\t width:600px; 
 
\t height:450px; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 
    
 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
} 
 
text { 
 
\t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t font-size:12px; 
 
\t fill:#9b9b9b; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
\t \t <title>Dashboard</title> 
 
\t \t <link href="style.css" rel="stylesheet" type="text/css"> 
 
\t </head> 
 

 
\t <body> 
 

 
\t \t <div id="graphbpm"> 
 
\t \t </div> 
 
\t \t <div id="graphgsr"> 
 
\t \t </div> 
 
\t \t <script src="js/jquery-2.1.3.js"></script> 
 

 
\t \t <script type="text/javascript" src="js/d3.min.js"></script> 
 
\t \t <script type="text/javascript" src="js/basic.js"></script> 
 
\t \t <script type="text/javascript" src="js/index.js"></script> 
 

 
\t </body> 
 
</html>

ошибка просто приходит, когда я изменил эту строку: x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]);

На UpdateData() & инициализации.

источник

2015-05-06 tmylamoule

Как только попробуйте это x.domain ([d3.max (данные, функция (d) {return d.timestamp;}), 0]); Если выше код не работает, сделать скрипку, то мы могли бы сделать что-то на нем, и получить его к вам .. –

http://hpics.li/9fd079b Не работает:/ Я Я получу скрипку, но как я могу добавить данные json из базы данных? – tmylamoule

Ох ... не могли бы вы сделать скрипку с вашими образцовыми данными. –

var inter; 
 
var gData = JSON.parse(d3.select("pre#data").text()); 
 
    gData.forEach(function(d) { 
 
    d.timestamp = d.timestamp; 
 
    d.value = +d.value; 
 

 
    }); 
 
    gData.sort(function(a, b){ return a.timestamp < b.timestamp; }); 
 
    
 
var startDate = d3.min(gData, function(d){ return d.timestamp;}); 
 
var endDate = d3.max(gData, function(d) { return d.timestamp; }); 
 
var startVal = 0; 
 
gData.forEach(function(d){ 
 
\t if(startDate == d.timestamp){ 
 
\t \t startVal = d.value; 
 
\t } 
 
}); 
 
    var counter=1; 
 
$(document).ready(function(){ 
 

 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
 
    \t width = 1000 - margin.left - margin.right, 
 
    \t height = 380 - margin.top - margin.bottom; 
 
\t 
 
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 
 
    
 
var formatTime = d3.time.format("%H:%M:%S"); 
 
    
 
var x = d3.time.scale().range([0, width]); 
 
    
 
var y = d3.scale.linear().range([height, 0]); 
 
    
 
var xAxis = d3.svg.axis() 
 
    \t .scale(x) 
 
    \t .orient("bottom") 
 
\t .tickFormat(d3.time.format("%H:%M:%S")) 
 
\t .ticks(5); 
 
    
 
var yAxis = d3.svg.axis() 
 
    \t .scale(y) 
 
    \t .orient("left") 
 
\t .ticks(5); 
 
    
 
var line = d3.svg.line() 
 
\t .interpolate('linear') 
 
    \t .x(function(d) { 
 
      return x(d.timestamp); 
 
     }) 
 
    \t .y(function(d) { 
 
      return y(d.value); 
 
     }); 
 
\t 
 

 

 
var svg = d3.select("#graphbpm").append("svg") 
 
    \t .attr("width", width) 
 
    \t .attr("height", height + margin.top + margin.bottom) 
 
\t \t .append("g") 
 
    \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 

 
/*var data = JSON.parse(d3.select("pre#data").text()); 
 
    data.forEach(function(d) { 
 
    d.timestamp = d.timestamp; 
 
    d.value = +d.value; 
 

 
    });*/ 
 
var data = []; 
 
for(var i=0; i<gData.length; i++){ 
 
\t if(parseInt(gData[i].timestamp) <= (parseInt(startDate)+120000)){ 
 
\t \t data.push(gData[i]); 
 
\t } 
 
} 
 

 
//x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]); 
 
    x.domain([d3.min(data, function(d){ 
 
     return d.timestamp; 
 
    }), d3.max(data, function(d){ 
 
     return d.timestamp; 
 
    })] 
 
    ); 
 
\t console.log(d3.min(data, function(d){ return d.timestamp;})); 
 
\t console.log(d3.max(data, function(d){ return d.timestamp;})); 
 
y.domain([0,d3.max(data, function(d) { return d.value; })]); 
 

 

 
startDate = d3.max(data, function(d) { return d.timestamp; }); 
 

 
    \t \t 
 
svg.append("g") 
 
\t .attr("class", "x axis") 
 
\t .attr("transform", "translate(0," + height + ")") 
 
\t .call(xAxis) 
 
\t .append("text") 
 
\t .attr("x", 500) 
 
\t .attr("y", -5) 
 
\t .style("text-anchor", "middle") 
 
\t .text("(TIME)"); 
 
    
 
svg.append("g") 
 
\t .attr("class", "y axis") 
 
\t .call(yAxis) 
 
\t .append("text") 
 
\t .attr("transform", "rotate(-90)") 
 
\t .attr("y", 6) 
 
\t .attr("dy", ".71em") 
 
\t .style("text-anchor", "end") 
 
\t .text("(LIVE)"); 
 

 
svg.append("path") 
 
\t .attr("class","line") 
 
\t .attr("d",line(data)) 
 
; 
 

 
var pathl = svg.append("g") 
 
    \t .attr("clip-path", "url(#clip)") 
 
    \t .append("path") 
 
    \t .data(data) 
 
    \t .attr("class", "line") 
 
\t .attr("fill","pink"); 
 

 
console.log("start Date"+(new Date(parseInt(startDate)))); 
 
inter = setInterval(function() { \t 
 
updateData(counter);counter++; 
 
if(startDate == endDate){ 
 
clearInterval(inter); 
 

 
} 
 
}, 2000); 
 

 
//}); 
 

 

 
function updateData(iL) 
 
{ 
 
var data = []; 
 
    for(var i=0; i<gData.length; i++){ 
 
\t \t if(gData[i].timestamp > (startDate) && gData[i].timestamp <= (parseInt(startDate)+(60000*4))){ 
 
\t \t \t data.push(gData[i]); 
 
\t \t } 
 
\t } 
 
\t 
 
if(data.length ==0){ 
 
\t data.push({"timestamp":startDate, "value":startVal}, {"timestamp": parseInt(startDate)+(60000*2) , "value": startVal}); 
 
\t startDate = d3.max(data, function(d) { return d.timestamp; }); 
 
}else { 
 
\t startDate = d3.max(data, function(d) { return d.timestamp; }); 
 
} 
 
    
 
data.forEach(function(d){ 
 
\t if(startDate == d.timestamp){ 
 
\t \t startVal = d.value; 
 
\t } 
 
}); 
 
//data.push(data); 
 
x.domain([d3.min(data, function(d) { return d.timestamp; }),d3.max(data, function(d) { return d.timestamp; })]); 
 
y.domain([0,d3.max(data, function(d) { return d.value; })]); 
 
    
 

 

 
svg.select("path.line") 
 
\t .attr("d", line(data)) 
 
    \t .transition(); 
 

 
\t 
 
svg.select(".x.axis") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .call(xAxis); 
 
\t \t 
 

 
svg.select(".y.axis") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .call(yAxis); 
 

 
\t 
 
svg.select("pathl") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .attr("transform", "translate(" + x(0) + ")"); 
 

 
svg.select("dot") 
 
    \t .transition() 
 
\t .duration(750) 
 
\t .ease("linear") 
 
\t .attr("transform", "translate(" + x(0) + ")"); 
 

 
\t 
 

 
data.shift(); 
 

 
    
 
} 
 
});

#graphbpm { 
 
    background-color:#fff; 
 
    width:600px; 
 
    height:450px; 
 
} 
 
#graphgsr { 
 
    background-color:#fff; 
 
    width:600px; 
 
    height:450px; 
 
} 
 
.axis path, .axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
} 
 
text { 
 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    font-size:12px; 
 
    fill:#9b9b9b; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="graphbpm"></div> 
 
    <div id="graphgsr"></div> 
 

 
<pre id="data"> 
 
    [{"timestamp":"1430905215360","value":"87"},{"timestamp":"1430905217837","value":"76"},{"timestamp":"1430905220828","value":"61"},{"timestamp":"1430905223955","value":"60"},{"timestamp":"1430905227003","value":"62"},{"timestamp":"1430905229813","value":"66"},{"timestamp":"1430905233249","value":"55"},{"timestamp":"1430905236108","value":"67"},{"timestamp":"1430905238666","value":"78"},{"timestamp":"1430905241466","value":"67"},{"timestamp":"1430905244487","value":"62"},{"timestamp":"1430905247404","value":"67"},{"timestamp":"1430905250050","value":"72"},{"timestamp":"1430905253014","value":"63"},{"timestamp":"1430905255882","value":"68"},{"timestamp":"1430905258931","value":"61"},{"timestamp":"1430905261858","value":"64"},{"timestamp":"1430905264939","value":"59"},{"timestamp":"1430905268152","value":"61"},{"timestamp":"1430905270874","value":"72"},{"timestamp":"1430905273838","value":"65"},{"timestamp":"1430905276556","value":"71"},{"timestamp":"1430905278844","value":"87"},{"timestamp":"1430905281061","value":"86"},{"timestamp":"1430905283241","value":"91"},{"timestamp":"1430905285635","value":"79"},{"timestamp":"1430905288256","value":"73"},{"timestamp":"1430905291006","value":"65"},{"timestamp":"1430905294219","value":"57"},{"timestamp":"1430905297337","value":"58"},{"timestamp":"1430905300519","value":"60"},{"timestamp":"1430905303519","value":"62"},{"timestamp":"1430905306895","value":"56"},{"timestamp":"1430905309839","value":"64"},{"timestamp":"1430905312477","value":"73"},{"timestamp":"1430905314887","value":"78"},{"timestamp":"1430905317846","value":"64"},{"timestamp":"1430905320665","value":"67"},{"timestamp":"1430905323219","value":"73"},{"timestamp":"1430905325868","value":"70"},{"timestamp":"1430905329035","value":"60"},{"timestamp":"1430905332000","value":"68"},{"timestamp":"1430905674552","value":"78"},{"timestamp":"1430905680627","value":"60"},{"timestamp":"1430905683670","value":"61"},{"timestamp":"1430905686705","value":"63"},{"timestamp":"1430905747024","value":"61"},{"timestamp":"1430905750008","value":"62"},{"timestamp":"1430905753084","value":"63"},{"timestamp":"1430905756262","value":"59"},{"timestamp":"1430905759329","value":"62"},{"timestamp":"1430905762285","value":"65"},{"timestamp":"1430905765359","value":"64"},{"timestamp":"1430905768121","value":"68"},{"timestamp":"1430905770997","value":"66"},{"timestamp":"1430905773700","value":"70"},{"timestamp":"1430905776488","value":"69"},{"timestamp":"1430905779534","value":"58"},{"timestamp":"1430905782567","value":"61"},{"timestamp":"1430905785501","value":"66"},{"timestamp":"1430905788628","value":"58"},{"timestamp":"1430905791501","value":"70"},{"timestamp":"1430905793939","value":"79"},{"timestamp":"1430905796838","value":"63"},{"timestamp":"1430905799645","value":"65"},{"timestamp":"1430905802711","value":"60"},{"timestamp":"1430905805721","value":"64"},{"timestamp":"1430905808205","value":"77"},{"timestamp":"1430905810658","value":"78"},{"timestamp":"1430905813384","value":"69"},{"timestamp":"1430905816217","value":"69"},{"timestamp":"1430905818956","value":"69"},{"timestamp":"1430905821952","value":"60"},{"timestamp":"1430905825013","value":"62"},{"timestamp":"1430905828056","value":"62"},{"timestamp":"1430905830800","value":"66"},{"timestamp":"1430905833922","value":"58"},{"timestamp":"1430905836851","value":"64"},{"timestamp":"1430905839824","value":"64"},{"timestamp":"1430905843068","value":"60"},{"timestamp":"1430905846152","value":"60"},{"timestamp":"1430905849483","value":"57"},{"timestamp":"1430905852694","value":"59"},{"timestamp":"1430905855724","value":"65"},{"timestamp":"1430905858550","value":"66"},{"timestamp":"1430905861835","value":"58"},{"timestamp":"1430905864880","value":"66"},{"timestamp":"1430905867771","value":"65"},{"timestamp":"1430905870712","value":"59"},{"timestamp":"1430905873832","value":"61"},{"timestamp":"1430905876485","value":"69"},{"timestamp":"1430905879488","value":"59"},{"timestamp":"1430905882638","value":"59"},{"timestamp":"1430905885541","value":"63"},{"timestamp":"1430905888351","value":"65"},{"timestamp":"1430905891408","value":"60"},{"timestamp":"1430905894403","value":"62"},{"timestamp":"1430905897225","value":"64"},{"timestamp":"1430905900164","value":"62"},{"timestamp":"1430905902896","value":"67"},{"timestamp":"1430905905521","value":"73"},{"timestamp":"1430905908258","value":"65"},{"timestamp":"1430905911363","value":"61"},{"timestamp":"1430905914332","value":"64"},{"timestamp":"1430905917380","value":"61"},{"timestamp":"1430905920594","value":"57"},{"timestamp":"1430905923542","value":"67"},{"timestamp":"1430905926348","value":"65"},{"timestamp":"1430905929409","value":"60"},{"timestamp":"1430905932378","value":"66"},{"timestamp":"1430905935167","value":"67"},{"timestamp":"1430905937780","value":"70"},{"timestamp":"1430905940252","value":"79"},{"timestamp":"1430905942769","value":"75"},{"timestamp":"1430905945241","value":"74"},{"timestamp":"1430905947848","value":"68"},{"timestamp":"1430905950881","value":"61"},{"timestamp":"1430905953914","value":"61"},{"timestamp":"1430905956895","value":"63"},{"timestamp":"1430905960048","value":"61"},{"timestamp":"1430905962822","value":"72"},{"timestamp":"1430905965754","value":"62"},{"timestamp":"1430906222968","value":"71"},{"timestamp":"1430906225549","value":"72"},{"timestamp":"1430906228296","value":"66"},{"timestamp":"1430906230917","value":"71"},{"timestamp":"1430906233641","value":"66"},{"timestamp":"1430906236789","value":"59"},{"timestamp":"1430906239491","value":"69"},{"timestamp":"1430906243151","value":"70"},{"timestamp":"1430906245957","value":"63"},{"timestamp":"1430906249093","value":"61"},{"timestamp":"1430906252057","value":"61"},{"timestamp":"1430906255158","value":"60"},{"timestamp":"1430906257521","value":"62"},{"timestamp":"1430906260349","value":"64"},{"timestamp":"1430906263328","value":"62"},{"timestamp":"1430906266309","value":"62"},{"timestamp":"1430906269364","value":"60"},{"timestamp":"1430906271556","value":"62"},{"timestamp":"1430906274341","value":"67"},{"timestamp":"1430906277292","value":"62"},{"timestamp":"1430906280221","value":"63"},{"timestamp":"1430906283202","value":"63"},{"timestamp":"1430906285472","value":"64"},{"timestamp":"1430906288192","value":"70"},{"timestamp":"1430906290677","value":"77"},{"timestamp":"1430906293274","value":"72"},{"timestamp":"1430906295898","value":"73"},{"timestamp":"1430906300472","value":"68"},{"timestamp":"1430906303269","value":"67"},{"timestamp":"1430906305067","value":"113"},{"timestamp":"1430906307264","value":"86"},{"timestamp":"1430906309602","value":"78"},{"timestamp":"1430906311991","value":"81"},{"timestamp":"1430906313530","value":"85"},{"timestamp":"1430906315505","value":"98"},{"timestamp":"1430906317412","value":"97"},{"timestamp":"1430906320445","value":"62"},{"timestamp":"1430906323540","value":"59"},{"timestamp":"1430906326591","value":"61"},{"timestamp":"1430906328419","value":"72"},{"timestamp":"1430906331061","value":"69"},{"timestamp":"1430906333969","value":"63"},{"timestamp":"1430906337035","value":"61"},{"timestamp":"1430906339821","value":"67"},{"timestamp":"1430906342011","value":"66"},{"timestamp":"1430906345047","value":"61"},{"timestamp":"1430906348087","value":"62"},{"timestamp":"1430906351045","value":"64"},{"timestamp":"1430906354078","value":"60"},{"timestamp":"1430906356317","value":"68"},{"timestamp":"1430907122190","value":"80"},{"timestamp":"1430907124783","value":"67"},{"timestamp":"1430907127963","value":"60"},{"timestamp":"1430907131154","value":"60"},{"timestamp":"1430907133724","value":"57"},{"timestamp":"1430907136900","value":"61"},{"timestamp":"1430907180957","value":"88"},{"timestamp":"1430907184215","value":"53"},{"timestamp":"1430907187382","value":"65"},{"timestamp":"1430907190050","value":"70"},{"timestamp":"1430907193108","value":"62"},{"timestamp":"1430907195569","value":"80"},{"timestamp":"1430907198297","value":"65"},{"timestamp":"1430907201292","value":"63"},{"timestamp":"1430907203759","value":"78"},{"timestamp":"1430907206532","value":"65"},{"timestamp":"1430907209446","value":"66"},{"timestamp":"1430907212441","value":"63"},{"timestamp":"1430907215168","value":"69"},{"timestamp":"1430907218275","value":"62"},{"timestamp":"1430907221436","value":"59"},{"timestamp":"1430907224451","value":"61"},{"timestamp":"1430907227410","value":"67"},{"timestamp":"1430907230349","value":"62"},{"timestamp":"1430907233621","value":"57"},{"timestamp":"1430907236694","value":"61"},{"timestamp":"1430907239606","value":"65"},{"timestamp":"1430907242678","value":"60"},{"timestamp":"1430907245865","value":"60"},{"timestamp":"1430907248940","value":"59"},{"timestamp":"1430907252013","value":"62"},{"timestamp":"1430907255064","value":"60"},{"timestamp":"1430907257999","value":"64"},{"timestamp":"1430907260767","value":"69"},{"timestamp":"1430907263452","value":"69"},{"timestamp":"1430907266105","value":"72"},{"timestamp":"1430907268849","value":"66"},{"timestamp":"1430907271699","value":"65"},{"timestamp":"1430907274461","value":"67"},{"timestamp":"1430907277235","value":"67"},{"timestamp":"1430907280191","value":"63"},{"timestamp":"1430907283269","value":"61"},{"timestamp":"1430907286200","value":"64"},{"timestamp":"1430907289102","value":"66"},{"timestamp":"1430907291462","value":"83"},{"timestamp":"1430907293543","value":"91"},{"timestamp":"1430907296314","value":"61"},{"timestamp":"1430907298297","value":"96"},{"timestamp":"1430907575667","value":"76"},{"timestamp":"1430907578737","value":"61"},{"timestamp":"1430907581605","value":"64"},{"timestamp":"1430907584730","value":"61"},{"timestamp":"1430907587764","value":"61"},{"timestamp":"1430907590894","value":"60"},{"timestamp":"1430907594133","value":"57"},{"timestamp":"1430907597306","value":"61"},{"timestamp":"1430907600268","value":"62"},{"timestamp":"1430907606496","value":"61"},{"timestamp":"1430907609275","value":"69"},{"timestamp":"1430907611747","value":"80"},{"timestamp":"1430907614516","value":"65"},{"timestamp":"1430907617276","value":"69"},{"timestamp":"1430907619837","value":"74"},{"timestamp":"1430907622548","value":"67"},{"timestamp":"1430907625557","value":"59"},{"timestamp":"1430907628773","value":"58"},{"timestamp":"1430907631774","value":"63"},{"timestamp":"1430907634749","value":"60"},{"timestamp":"1430907637759","value":"62"},{"timestamp":"1430907640548","value":"68"},{"timestamp":"1430907643199","value":"70"},{"timestamp":"1430907644821","value":"78"},{"timestamp":"1430907647348","value":"74"},{"timestamp":"1430907650083","value":"72"},{"timestamp":"1430907652826","value":"67"},{"timestamp":"1430907655901","value":"62"},{"timestamp":"1430907658773","value":"66"},{"timestamp":"1430907661828","value":"64"},{"timestamp":"1430907663898","value":"125"},{"timestamp":"1430907666855","value":"63"},{"timestamp":"1430907669750","value":"64"},{"timestamp":"1430907672714","value":"62"},{"timestamp":"1430907675671","value":"61"},{"timestamp":"1430907678629","value":"61"},{"timestamp":"1430907681396","value":"69"},{"timestamp":"1430907684298","value":"64"},{"timestamp":"1430907687112","value":"69"},{"timestamp":"1430907689529","value":"80"},{"timestamp":"1430907691954","value":"77"},{"timestamp":"1430907694731","value":"67"},{"timestamp":"1430907697311","value":"73"},{"timestamp":"1430907699741","value":"76"},{"timestamp":"1430907702503","value":"66"},{"timestamp":"1430907705435","value":"63"},{"timestamp":"1430907708387","value":"64"},{"timestamp":"1430907711212","value":"66"},{"timestamp":"1430907714007","value":"68"},{"timestamp":"1430907715815","value":"140"},{"timestamp":"1430907718331","value":"74"},{"timestamp":"1430912520403","value":"102"},{"timestamp":"1430912522217","value":"104"},{"timestamp":"1430912524079","value":"106"},{"timestamp":"1430912525843","value":"108"},{"timestamp":"1430912527630","value":"110"},{"timestamp":"1430912529372","value":"106"},{"timestamp":"1430912531300","value":"96"},{"timestamp":"1430912533142","value":"104"},{"timestamp":"1430912534964","value":"109"},{"timestamp":"1430912536721","value":"110"},{"timestamp":"1430912538410","value":"112"},{"timestamp":"1430912540112","value":"114"},{"timestamp":"1430912541808","value":"112"},{"timestamp":"1430912543553","value":"109"},{"timestamp":"1430912545254","value":"110"},{"timestamp":"1430912547056","value":"107"},{"timestamp":"1430912548884","value":"103"},{"timestamp":"1430912550737","value":"104"},{"timestamp":"1430912552505","value":"106"},{"timestamp":"1430912554413","value":"99"},{"timestamp":"1430912556396","value":"96"},{"timestamp":"1430912558320","value":"99"},{"timestamp":"1430912560236","value":"100"},{"timestamp":"1430912564005","value":"102"},{"timestamp":"1430912565828","value":"106"},{"timestamp":"1430912567703","value":"103"},{"timestamp":"1430912569570","value":"101"},{"timestamp":"1430912571454","value":"101"},{"timestamp":"1430912573332","value":"103"},{"timestamp":"1430912575163","value":"104"},{"timestamp":"1430912577066","value":"101"},{"timestamp":"1430912578964","value":"100"},{"timestamp":"1430912580965","value":"97"},{"timestamp":"1430912582885","value":"101"},{"timestamp":"1430912584662","value":"105"},{"timestamp":"1430912587661","value":"78"},{"timestamp":"1430912589353","value":"107"},{"timestamp":"1430912591090","value":"111"},{"timestamp":"1430912592891","value":"111"},{"timestamp":"1430912594620","value":"111"},{"timestamp":"1430912596379","value":"108"},{"timestamp":"1430912598104","value":"114"},{"timestamp":"1430912599904","value":"113"},{"timestamp":"1430912601615","value":"110"},{"timestamp":"1430912603340","value":"109"},{"timestamp":"1430912605085","value":"110"},{"timestamp":"1430912606913","value":"111"},{"timestamp":"1430912608619","value":"113"},{"timestamp":"1430912610332","value":"109"},{"timestamp":"1430912612144","value":"104"},{"timestamp":"1430912614033","value":"104"},{"timestamp":"1430912615890","value":"103"},{"timestamp":"1430912617700","value":"105"},{"timestamp":"1430912619600","value":"102"},{"timestamp":"1430912621432","value":"104"},{"timestamp":"1430912623259","value":"103"},{"timestamp":"1430912625132","value":"101"},{"timestamp":"1430912627051","value":"100"},{"timestamp":"1430912628929","value":"102"},{"timestamp":"1430912630772","value":"103"},{"timestamp":"1430912632642","value":"103"},{"timestamp":"1430912636351","value":"102"},{"timestamp":"1430912638210","value":"102"},{"timestamp":"1430912640156","value":"104"},{"timestamp":"1430912641945","value":"108"},{"timestamp":"1430912643653","value":"115"},{"timestamp":"1430912645448","value":"113"},{"timestamp":"1430912647265","value":"104"},{"timestamp":"1430912649102","value":"104"},{"timestamp":"1430912650909","value":"107"},{"timestamp":"1430912652767","value":"109"},{"timestamp":"1430912654511","value":"109"},{"timestamp":"1430912656341","value":"104"},{"timestamp":"1430912658178","value":"102"},{"timestamp":"1430912660081","value":"101"},{"timestamp":"1430912661981","value":"99"},{"timestamp":"1430912663857","value":"101"},{"timestamp":"1430912665819","value":"98"},{"timestamp":"1430912667776","value":"97"},{"timestamp":"1430912669677","value":"99"},{"timestamp":"1430912671351","value":"127"},{"timestamp":"1430912672810","value":"105"},{"timestamp":"1430912674621","value":"103"},{"timestamp":"1430912676506","value":"100"},{"timestamp":"1430912678568","value":"90"},{"timestamp":"1430912680024","value":"171"},{"timestamp":"1430912681986","value":"93"},{"timestamp":"1430912683949","value":"96"},{"timestamp":"1430912685927","value":"96"},{"timestamp":"1430912687876","value":"97"},{"timestamp":"1430912689841","value":"95"},{"timestamp":"1430912691844","value":"96"},{"timestamp":"1430912693794","value":"97"},{"timestamp":"1430912695698","value":"98"},{"timestamp":"1430912697627","value":"99"},{"timestamp":"1430912699548","value":"98"},{"timestamp":"1430912701446","value":"98"},{"timestamp":"1430912703368","value":"98"},{"timestamp":"1430912705265","value":"101"},{"timestamp":"1430912707105","value":"102"},{"timestamp":"1430912708965","value":"103"},{"timestamp":"1430912710827","value":"104"},{"timestamp":"1430912712632","value":"104"},{"timestamp":"1430912714481","value":"101"},{"timestamp":"1430912716417","value":"97"},{"timestamp":"1430912718398","value":"97"},{"timestamp":"1430912720285","value":"101"},{"timestamp":"1430912722116","value":"103"},{"timestamp":"1430912724030","value":"100"},{"timestamp":"1430912725935","value":"98"},{"timestamp":"1430912727870","value":"101"},{"timestamp":"1430912729717","value":"103"},{"timestamp":"1430912731538","value":"103"},{"timestamp":"1430912733398","value":"100"},{"timestamp":"1430912735278","value":"101"},{"timestamp":"1430912737190","value":"104"},{"timestamp":"1430912738974","value":"105"},{"timestamp":"1430912740827","value":"102"},{"timestamp":"1430912742758","value":"100"},{"timestamp":"1430912744644","value":"100"},{"timestamp":"1430912746546","value":"100"},{"timestamp":"1430912748436","value":"100"},{"timestamp":"1430912750298","value":"104"},{"timestamp":"1430912752083","value":"105"},{"timestamp":"1430912755191","value":"96"},{"timestamp":"1430912757143","value":"99"},{"timestamp":"1430912758991","value":"103"},{"timestamp":"1430912760778","value":"105"},{"timestamp":"1430912762674","value":"99"},{"timestamp":"1430912764722","value":"91"},{"timestamp":"1430912766733","value":"96"},{"timestamp":"1430912767875","value":"104"},{"timestamp":"1430912769701","value":"109"},{"timestamp":"1430912771388","value":"115"},{"timestamp":"1430912773091","value":"112"},{"timestamp":"1430912774824","value":"111"},{"timestamp":"1430912776630","value":"105"},{"timestamp":"1430912778443","value":"106"},{"timestamp":"1430912780299","value":"102"},{"timestamp":"1430912783191","value":"114"},{"timestamp":"1430912785089","value":"100"},{"timestamp":"1430912787017","value":"100"},{"timestamp":"1430912788930","value":"102"},{"timestamp":"1430912790806","value":"103"},{"timestamp":"1430912792649","value":"105"},{"timestamp":"1430912794490","value":"104"},{"timestamp":"1430912797644","value":"103"},{"timestamp":"1430912799616","value":"98"},{"timestamp":"1430912801504","value":"102"},{"timestamp":"1430912803392","value":"99"},{"timestamp":"1430912805372","value":"95"},{"timestamp":"1430912807350","value":"96"},{"timestamp":"1430912809272","value":"99"},{"timestamp":"1430912812075","value":"100"},{"timestamp":"1430912814066","value":"95"},{"timestamp":"1430912816167","value":"96"},{"timestamp":"1430912818087","value":"100"},{"timestamp":"1430912819999","value":"98"},{"timestamp":"1430912821941","value":"100"},{"timestamp":"1430912823845","value":"100"},{"timestamp":"1430912826963","value":"95"},{"timestamp":"1430912828985","value":"96"},{"timestamp":"1430912830967","value":"97"},{"timestamp":"1430912832935","value":"96"},{"timestamp":"1430912834941","value":"99"},{"timestamp":"1430912836878","value":"97"},{"timestamp":"1430912838929","value":"94"},{"timestamp":"1430912839922","value":"93"},{"timestamp":"1430912841944","value":"97"},{"timestamp":"1430912843811","value":"101"},{"timestamp":"1430912845685","value":"101"},{"timestamp":"1430912847617","value":"99"},{"timestamp":"1430912849549","value":"99"},{"timestamp":"1430912851446","value":"97"},{"timestamp":"1430912853109","value":"116"},{"timestamp":"1430912853992","value":"114"},{"timestamp":"1430912855596","value":"110"},{"timestamp":"1430912857263","value":"114"},{"timestamp":"1430912858917","value":"115"},{"timestamp":"1430912860606","value":"117"},{"timestamp":"1430912862272","value":"113"},{"timestamp":"1430912863959","value":"112"},{"timestamp":"1430912865716","value":"111"},{"timestamp":"1430913095754","value":"90"},{"timestamp":"1430913097826","value":"92"},{"timestamp":"1430913099959","value":"86"},{"timestamp":"1430913102263","value":"82"},{"timestamp":"1430913104611","value":"81"},{"timestamp":"1430913106852","value":"85"},{"timestamp":"1430913109104","value":"82"},{"timestamp":"1430913111607","value":"74"},{"timestamp":"1430913114096","value":"81"},{"timestamp":"1430913116295","value":"87"},{"timestamp":"1430913118751","value":"73"},{"timestamp":"1430913120831","value":"95"},{"timestamp":"1430913122761","value":"99"},{"timestamp":"1430913124880","value":"85"},{"timestamp":"1430913127166","value":"83"}] 
 
</pre>

После этого уйму тренировки. Я думаю, наконец, я выполнил ваше требование. Все эти дни мы думаем о том, почему это не обновление и получение ошибок, все из-за данных. Мы хотим, чтобы отобразить шкалу с 30секундами клещей, для этого нам нужно обновить шкалу с 2mins для 5ticks, но ваши данные как этот после его изменений на сегодняшний день временных меток являются

gData.forEach(function(d){console.log(new Date(parseInt(d.timestamp))); });

Run выше коды, то вы узнаете временные промежутки.

время, начинающееся с 15:11:21 до 17:22:07 В промежутке, см. Отсутствие данных. 15:12:12 до 15:17:54 Есть так много пробелов, любезно наблюдайте за моим кодом, как я обрабатываю недоступность данных.

Надеюсь, что вы поняли.Если не спрашивайте меня больше. ОК

источник

2015-05-07 09:33:37

d3.js линия диаграммы перетекает YAxis

ответ

Смежные вопросы