无法在D3.js中动态更新图形和轴
Not able to update the graph and axes both dynamically in D3.js
我正在使用D3.js制作折线图,我的目标是动态更新图形(线路径)以及两个轴。使用给定的代码,我可以动态更新轴和线路径,但问题是以前的线路径仍然显示在图表上。
如何删除上一行路径?
/******************************* CHART PLOTTING FOR TWITTER SENTIMENT ************************/
/*实施受到http://bl.ocks.org/1166403*/
window.setInterval(refreshGraph, 3000);
// while (true){
// plot();
// delay(5000);
// }
var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];
// function plot(){
// d3.json("/bigdata/v1/analytics/sentiment", function(d){
// define dimensions of graph
var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height
// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
// data = data.concat(d.values);
// X scale will fit all values from data[] within pixels 0-w
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
var y = d3.scale.linear().domain(d3.extent(data)).range([h, 0]);
// automatically determining max range can work something like this
// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
// create a line function that can convert data[] into x and y points
var line = d3.svg.line().interpolate("monotone")
// assign the X function to plot our line as we wish
.x(function(d,i) {
// verbose logging to show what's actually being done
console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
// return the X coordinate where we want to plot this datapoint
return x(i);
})
.y(function(d) {
// verbose logging to show what's actually being done
console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
// return the Y coordinate where we want to plot this datapoint
return y(d);
})
// Add an SVG element with the desired dimensions and margin.
//debugger;
var graph = d3.select("#igraph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// create yAxis
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
// Add the x-axis.
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
// Add the y-axis to the left
graph.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
// Add the line by appending an svg:path element with the data line we created above
// do this AFTER the axes above so that the line is above the tick-lines
graph.append("svg:path").attr("d", line(data));
// });
// to refresh the graph after interval of 3ms
function refreshGraph () {
//debugger;
d3.json("/bigdata/v1/analytics/sentiment", function(d){
data = data.concat(d.values);
/* var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain(d3.extent(data)).range([h, 0]);
//line.exit().remove
graph.selectAll(".xAxis")
.transition()
.duration(10)
.call(xAxis);
graph.selectAll("line").data(data).enter()
.append("svg:path")
.attr("d", line(data))
});
*/
x.domain([0, data.length]);
var t = graph.transition().duration(750);
t.select(".x.axis").call(xAxis);
graph.select("path.line").remove();
graph.selectAll("line").data(data).enter()
.append("svg:path")
.attr("d", line(data));
});
}
/******************************* CHART PLOTTING FOR TWITTER SENTIMENT ************************/
首先,graph.select("path.line").remove()
没有删除任何内容,因为在您的视图中没有分类为"line"
的路径,因为您没有将该类分配给正在创建的svg:path
。因此,当您.append("svg:path")
时,您还需要运行.classed('line', true)
。
接下来,在有graph.selectAll("line").data(data).enter()
的情况下,需要在"line"
前面加一个.
,使其选择任何分类为line
的内容。
最后-根据API的工作方式,这可能不是一个错误-在data = data.concat(d.values)
中,将新数据附加到现有数据上,而不是替换它。因此,如果API返回整行数据,那么将其附加到现有的数据上是不合适的。
相关文章:
- 如何在Javascript中更新实时图形
- 如何更新 C3.js图形线宽和刻度颜色
- 使用Plotly中的新数据更新图形的高性能方法
- 如何在 d3.js 中更新我的图形图例
- 动态更新网页上的图形
- 如何在数据更新时更新可重用的 d3.js 图形
- 如何使用图形API查询公共facebook事件?[更新的搜索]
- Flotr2,图形上的颜色已更改,图例不更新
- 从json数据更新图形
- JavaScript自动更新图形
- HighChart JavaSCript两个样条在同一图形中更新
- D3更新数据和更新图形
- 使用Microsoft图形API更新任务,给出400个无效请求的响应
- Redux-对复杂图形的状态进行建模,并触发多个更新和副作用以响应单个操作
- 用新数据更新图形
- 为什么不更新D3 SVG图形上的轴?
- 带有图形更新的树视图复选框选择不能正常工作
- JavaScript/D3:在点击时创建浮动文本框,并从文本框输入更新图形
- 无法在D3.js中动态更新图形和轴
- D3, JSON,图形,强制布局,数据更新,未完成重绘,拖动