[英]D3 Update Graph
really stucked on this issue for days. 在这个问题上确实停留了好几天。 I am trying to update my d3 graph to show how long it takes to run a function on a calculator. 我正在尝试更新d3图形,以显示在计算器上运行一个函数需要多长时间。 With the info I get, I will show the time taken and display it on the graph that I previously drew. 利用获得的信息,我将显示花费的时间并将其显示在我先前绘制的图形上。 My issue here now is that I just can't get the graph to update. 现在我的问题是我无法更新图表。
Codes for the graph: 图形代码:
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = dataone.map(function(d) {
return {
date:d[0],
close: d[1]
};
});
console.log(data);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
Code for update function and update of array: 更新函数和数组更新的代码:
function updateArray(){
dataone.push(clickss-0.5,clickss);
updateData();
}
function updateData() {
var data = dataone.map(function(d) {
return {
date:d[0],
close: d[1]
};
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Select the section we want to apply our changes to
var svg = d3.select("body").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
} }
Please advise on how I can get this to work. 请告知我如何使它工作。 I read quite a few guides now but 我现在读了很多指南,但是
Couple things: 几件事情:
1.) In your update function, your line generator function is line
not valueline
. 1.)在更新函数中,行生成器函数是line
not valueline
。
2.) By looking at your accessor functions, I don't think you meant dataone.push(clickss-0.5,clickss);
2.)通过查看访问器函数,我认为您的意思不是dataone.push(clickss-0.5,clickss);
but rather dataone.push([clickss-0.5,clickss]);
而是dataone.push([clickss-0.5,clickss]);
. 。 You need an array of arrays. 您需要一个数组数组。
In addition, you don't need to map your dataone
array to another structure. 另外,您不需要将数据dataone
数组映射到另一个结构。 Just change your accessors: 只需更改您的访问器:
x.domain(d3.extent(data, function(d) {
return d[0];
}));
y.domain(d3.extent(data, function(d) {
return d[1];
}));
...
var line = d3.svg.line()
.x(function(d) {
return x(d[0]);
})
.y(function(d) {
return y(d[1]);
});
Here's your code working and cleaned up a bit: 这是您的代码,可以进行一些清理:
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var dataone = []; for (var i = 0; i < 10; i++){ dataone.push([i,Math.random()]); } var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 400 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]) var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d[0]); }) .y(function(d) { return y(d[1]); }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Scale the range of the data again x.domain(d3.extent(dataone, function(d) { return d[0]; })); y.domain([0, d3.max(dataone, function(d) { return d[1]; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Price ($)"); svg.append("path") .datum(dataone) .attr("class", "line") .attr("d", line) .style("fill","none") .style("stroke","steelblue"); function updateData() { // Scale the range of the data again x.domain(d3.extent(dataone, function(d) { return d[0]; })); y.domain([0, d3.max(dataone, function(d) { return d[1]; })]); // Select the section we want to apply our changes to var svg = d3.select("body").transition(); // Make the changes svg.select(".line") // change the line .duration(750) .attr("d", line(dataone)); svg.select(".x.axis") // change the x axis .duration(750) .call(xAxis); svg.select(".y.axis") // change the y axis .duration(750) .call(yAxis); } setInterval(function(){ for (var i = 0; i < 5; i++){ dataone.push([dataone.length + i, Math.random()]); } updateData(); },1000); </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.