[英]Update d3 graph with new data
I am trying to update a d3 graph when I click on a County on a map.当我点击地图上的一个县时,我试图更新一个 d3 图表。 Instead of updating the existing chart, a new graph is created each time.
每次都会创建一个新图表,而不是更新现有图表。 Any ideas of how to rectify this?
关于如何纠正这个问题的任何想法? Code is here: https://github.com/careyshan/d3-graphUpgade Thanks
代码在这里: https : //github.com/careyshan/d3-graphUpgade谢谢
This is the part of the code that I am having difficulty with:这是我遇到困难的代码部分:
on("click", function(d,i){
if(document.getElementById('linechart').childNodes===null){
console.log("Working")
dataNew = data.filter(function( obj ) {
return obj.County == d.properties.NAME_TAG;
console.log(data);
});
dataNew.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return b.date - a.date;
});
for (var i=1; i<dataNew.length;i++){
dataSel.push(dataNew[i]);
}
}else if(document.getElementById('linechart').childNodes!=null){
//console.log("check")
dataNew = data.filter(function( obj ) {
return obj.County == d.properties.NAME_TAG;
});
dataNew.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return b.date - a.date;
});
for (var i=1; i<dataNew.length;i++){
dataSel.push(dataNew[i]);
}
}
linechart(dataNew);
console.log(dataNew);
});
A new graph is created each time because on every call to the function linechart()
you are appending a new graph (an svg element) to the body of the page.每次都会创建一个新图形,因为在每次调用函数
linechart()
您都会将一个新图形(一个 svg 元素)附加到页面正文中。
This is the snippet from your code which appends a new graph each time.这是您的代码片段,每次都会附加一个新图表。
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("id","linechart")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
If you want to update the same chart, just modify your linechart()
function to refer to the same svg element.如果要更新相同的图表,只需修改
linechart()
函数以引用相同的 svg 元素。 You can achieve this by declaring a global variable for the svg element and use it in your linechart()
method like below:您可以通过为 svg 元素声明一个全局变量并在
linechart()
方法中使用它来实现这一点,如下所示:
// If graph is not there, create it
if(!svg) {
// append the svg object to the body of the page
//appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
svg= d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("id","linechart")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
}
Note: Declare the svg as a global variable (may be at the starting of the script tag):注意:将 svg 声明为全局变量(可能位于脚本标签的开头):
var svg;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.