生成实时线图的问题

本文介绍了生成实时线图的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在尝试使用教程生成实时线图 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）） // .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））// .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 tutorialshttp://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 frontdata.shift();// transition the linepath.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 issuesAs 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. 这篇关于生成实时线图的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！