生成实时线图的问题 [英] Issues with generating real time line graphs
本文介绍了生成实时线图的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用教程生成实时线图
http://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/ & http://bost.ocks.org/mike/path/
第一个路径工作正常，我得到一个svg线图。现在当我做
data.push（random（））;
//弹出旧数据点off the front
data.shift（）;
//转换行
path.transition（）。attr ）;
它不工作可能是原因。整个代码是
var data = [1,2,3,4,3,4,5,8,2， 3，4，1];
var w = 400，
h = 200，
margin = 20，
y = d3.scale.linear（）。domain（[0，d3.max（data）]） .range（[0 + margin，h-margin]），
x = d3.scale.linear（）。domain（[0，data.length]）。
var vis = d3.select（body）
.append（svg：svg）
.attr（width，w）
。 attr（height，h）
var g = vis.append（svg：g）
.attr（transform，translate（0，200）
var line = d3.svg.line（）
.x（function（d，i）{return x（i）;}）
.y ）{return -1 * y（d）;}）
g.append（svg：path）。attr（d，line（data））;
g.append（svg：line）
.attr（x1，x（0））
.attr（y1，-1 * y 0））
.attr（x2，x（w））
.attr（y2，-1 * y（0））
g.append svg：line）
.attr（x1，x（0））
.attr（y1，-1 * y（0））
.attr ，x（0））
.attr（y2，-1 * y（d3.max（data）））
g.selectAll（。xLabel）
.data（x.ticks（5））
.enter（）。append（svg：text）
.attr（class，xLabel）
.text （String）
.attr（x，function（d）{return x（d）}）
.attr（y，0）
.attr ，middle）
g.selectAll（。yLabel）
.data（y.ticks（4））
.enter ：text）
.attr（class，yLabel）
.text（String）
.attr（x，0）
.attr ，function（d）{return -1 * y（d）}）
.attr（text-anchor，right）
.attr（dy，4）
g.selectAll（。xTicks）
.data（x.ticks（5））
.enter（）。append（svg：line）
。 attr（class，xTicks）
.attr（x1，function（d）{return x（d）; }）
.attr（y1，-1 * y（0））
.attr（x2，function（d）{return x（d）;}）
。 attr（y2，-1 * y（-0.3））
g.selectAll（。yTicks）
.data（y.ticks（4））
.enter（）。append（svg：line）
.attr（class，yTicks）
.attr（y1，function（d）{return -1 * y d）;}）
.attr（x1，x（-0.3））
.attr（y2，function（d）{return -1 * y（d）;}）
.attr（x2，x（0））
setInterval（function（）{
data.push（10）;
data.shift
g.attr（d，line）
.attr（transform，null）
.transition（）
.ease（linear）
.attr（transform，translate（+ x（-1）+））;
alert（'yaho1'）;
}，2000）
}）;
使用此新代码更新代码后
var data = [1，2，3，4，3，4，5，8，2，3，4，10]
var w = 400，
h = 200，
margin = 20，
y = d3.scale.linear（）。domain（[0，10]）。 + margin，h- margin]），
x = d3.scale.linear（）。domain（[0，data.length]）。range（[0 + margin，w- margin]）
var vis = d3.select（body）
.append（svg：svg）
.attr（width，w）
.attr ，h）
var g = vis.append（svg：g）
.attr（transform，translate（0，200）
var line = d3.svg.line（）
.x（function（d，i）{return x（i）;}）
.y ）{return -1 * y（d）;}）
g.append（svg：path）。attr（d，line（data））;
g.append（svg：line）
.attr（x1，x（0））
.attr（y1，-1 * y 0））
.attr（x2，x（w））
.attr（y2，-1 * y（0））
g.append svg：line）
.attr（x1，x（0））
.attr（y1，-1 * y（0））
.attr ，x（0））
.attr（y2，-1 * y（d3.max（data）））
g.selectAll（。xLabel）
.data（x.ticks（5））
.enter（）。append（svg：text）
.attr（class，xLabel）
.text （String）
.attr（x，function（d）{return x（d）}）
.attr（y，0）
.attr ，middle）
g.selectAll（。yLabel）
.data（y.ticks（4））
.enter ：text）
.attr（class，yLabel）
.text（String）
.attr（x，0）
.attr ，function（d）{return -1 * y（d）}）
.attr（text-anchor，right）
.attr（dy，4）
g.selectAll（。xTicks）
.data（x.ticks（5））
.enter（）。append（svg：line）
。 attr（class，xTicks）
.attr（x1，function（d）{return x（d）; }）
.attr（y1，-1 * y（0））
.attr（x2，function（d）{return x（d）;}）
。 attr（y2，-1 * y（-0.3））
g.selectAll（。yTicks）
.data（y.ticks（4））
.enter（）。append（svg：line）
.attr（class，yTicks）
.attr（y1，function（d）{return -1 * y d）;}）
.attr（x1，x（-0.3））
.attr（y2，function（d）{return -1 * y（d）;}）
.attr（x2，x（0））
setInterval（function（）{
var number = Math.round（Math.random ;
data.push（number）;
data.shift（）;
g.selectAll（path）
.attr（d，line（data）） // < - line（data）而不是数据
.attr（transform，null）
.transition（）
.ease（linear）
。 attr（transform，translate（+ x（-1）+））;
}，
200）;
我的行为几乎类似于我想要的。但是，我有一些问题
正如你可以看到，当我随机生成一个新的数据，推它，并弹出一个在前面。并且我绘制图形，线跨越边界，即在左侧的y轴。代码中出了什么问题？ 解决方案
您的区间 .attr（d ，___） assignement。
您需要指定d3行函数可以工作的一些数据。
尝试：
setInterval（function（）{
data.push（10）;
data.shift（）;
g.selectAll（path）
.attr（d，line（data））// < - line（data）而不是数据
.attr（transform，null）
.transition b $ b .ease（linear）
.attr（transform，translate（+ x（-1）+））;
}，
2000）;
我刚刚尝试过这个修复程序的代码，它工作。
I am trying to generate a real time line graph using the tutorials
http://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/ & http://bost.ocks.org/mike/path/
The first path works fine I get a svg line graph. Now when I do
data.push(random());
// pop the old data point off the front data.shift();
// transition the line path.transition().attr("d", line);
It doesn't work what could be the reason. The whole code is
var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 1];
var w = 400,
h = 200,
margin = 20,
y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
var g = vis.append("svg:g")
.attr("transform", "translate(0, 200)");
var line = d3.svg.line()
.x(function(d,i) { return x(i); })
.y(function(d) { return -1 * y(d); })
g.append("svg:path").attr("d", line(data));
g.append("svg:line")
.attr("x1", x(0))
.attr("y1", -1 * y(0))
.attr("x2", x(w))
.attr("y2", -1 * y(0))
g.append("svg:line")
.attr("x1", x(0))
.attr("y1", -1 * y(0))
.attr("x2", x(0))
.attr("y2", -1 * y(d3.max(data)))
g.selectAll(".xLabel")
.data(x.ticks(5))
.enter().append("svg:text")
.attr("class", "xLabel")
.text(String)
.attr("x", function(d) { return x(d) })
.attr("y", 0)
.attr("text-anchor", "middle")
g.selectAll(".yLabel")
.data(y.ticks(4))
.enter().append("svg:text")
.attr("class", "yLabel")
.text(String)
.attr("x", 0)
.attr("y", function(d) { return -1 * y(d) })
.attr("text-anchor", "right")
.attr("dy", 4)
g.selectAll(".xTicks")
.data(x.ticks(5))
.enter().append("svg:line")
.attr("class", "xTicks")
.attr("x1", function(d) { return x(d); })
.attr("y1", -1 * y(0))
.attr("x2", function(d) { return x(d); })
.attr("y2", -1 * y(-0.3))
g.selectAll(".yTicks")
.data(y.ticks(4))
.enter().append("svg:line")
.attr("class", "yTicks")
.attr("y1", function(d) { return -1 * y(d); })
.attr("x1", x(-0.3))
.attr("y2", function(d) { return -1 * y(d); })
.attr("x2", x(0))
setInterval(function() {
data.push(10);
data.shift();
g.attr("d", line)
.attr("transform", null)
.transition()
.ease("linear")
.attr("transform", "translate(" + x(-1) + ")");
alert('yaho1');
}, 2000);
});
After updating the code with this new one
var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 10];
var w = 400,
h = 200,
margin = 20,
y = d3.scale.linear().domain([0, 10]).range([0 + margin, h - margin]),
x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
var g = vis.append("svg:g")
.attr("transform", "translate(0, 200)");
var line = d3.svg.line()
.x(function(d,i) { return x(i); })
.y(function(d) { return -1 * y(d); })
g.append("svg:path").attr("d", line(data));
g.append("svg:line")
.attr("x1", x(0))
.attr("y1", -1 * y(0))
.attr("x2", x(w))
.attr("y2", -1 * y(0))
g.append("svg:line")
.attr("x1", x(0))
.attr("y1", -1 * y(0))
.attr("x2", x(0))
.attr("y2", -1 * y(d3.max(data)))
g.selectAll(".xLabel")
.data(x.ticks(5))
.enter().append("svg:text")
.attr("class", "xLabel")
.text(String)
.attr("x", function(d) { return x(d) })
.attr("y", 0)
.attr("text-anchor", "middle")
g.selectAll(".yLabel")
.data(y.ticks(4))
.enter().append("svg:text")
.attr("class", "yLabel")
.text(String)
.attr("x", 0)
.attr("y", function(d) { return -1 * y(d) })
.attr("text-anchor", "right")
.attr("dy", 4)
g.selectAll(".xTicks")
.data(x.ticks(5))
.enter().append("svg:line")
.attr("class", "xTicks")
.attr("x1", function(d) { return x(d); })
.attr("y1", -1 * y(0))
.attr("x2", function(d) { return x(d); })
.attr("y2", -1 * y(-0.3))
g.selectAll(".yTicks")
.data(y.ticks(4))
.enter().append("svg:line")
.attr("class", "yTicks")
.attr("y1", function(d) { return -1 * y(d); })
.attr("x1", x(-0.3))
.attr("y2", function(d) { return -1 * y(d); })
.attr("x2", x(0))
setInterval(function() {
var number = Math.round(Math.random()*10) + 1;
data.push(number);
data.shift();
g.selectAll("path")
.attr("d", line(data)) // <-- line(data) instead of data
.attr("transform", null)
.transition()
.ease("linear")
.attr("transform", "translate(" + x(-1) + ")");
},
200);
I get the behavior almost similar as I want.However, I have some issues
As you can see when I randomly generate a new data and push it and pop the one at the front. And I draw the graphics, the line crosses the boundary that is the y axis at the left side. What is going wrong in the code? How can I fix this?
解决方案
You have an error in your interval's .attr("d", ___ ) assignement.
You need to specify some data the d3 line function can work on.
Try this:
setInterval(function() {
data.push(10);
data.shift();
g.selectAll("path")
.attr("d", line(data)) // <-- line(data) instead of data
.attr("transform", null)
.transition()
.ease("linear")
.attr("transform", "translate(" + x(-1) + ")");
},
2000);
I just tried your code with this fix and it worked.
这篇关于生成实时线图的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
