Javascript D3js代码在调用两次时会复制图形,而不是刷新
这是我的D3js代码Javascript D3js代码在调用两次时会复制图形,而不是刷新,javascript,canvas,graph,svg,d3.js,Javascript,Canvas,Graph,Svg,D3.js,这是我的D3js代码 function ShowGraph(data) { var w = 600, h = 600, padding = 36, p = 31, barwidth = 1; var bar_height = d3.scale.linear() .do
function ShowGraph(data)
{
var w = 600,
h = 600,
padding = 36,
p = 31,
barwidth = 1;
var bar_height = d3.scale.linear()
.domain([d3.max(data, function(d) { return d.count; }), 0] ) // min max of count
.range([p, h-p]);
var bar_xpos = d3.scale.linear()
.domain([1580, d3.max(data, function(d) { return d.year; })] ) // min max of year
.range([p,w-p]);
var xAxis = d3.svg.axis()
.scale(bar_xpos)
.orient("bottom")
.ticks(5); //Set rough # of ticks
var yAxis = d3.svg.axis()
.scale(bar_height)
.orient("left")
.ticks(5);
var svg = d3.select("#D3line").append("svg")
.attr("width", w)
.attr("height", h);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) {
return bar_xpos(d.year); })
.attr("y", function(d) {
return bar_height(d.count); })
.attr("width", barwidth)
.attr("height", function(d) {return h - bar_height(d.count) - padding; })
.attr("fill", "steelblue")
}
我在单击按钮时运行上述代码。当我单击按钮时,图形显示出来,但如果再次单击它,它会显示另一个图形。因此,现在我得到2个图形。如果再次单击,我得到3个。我只想更新现有图形,而不是复制图形 这里您总是附加一个新的SVG元素(
.append('SVG')
):
因此,不使用新的SVG元素(从而使用新的图形),只需维护指向第一个选定图形的链接并覆盖它或再次选择SVG:
var svg = d3.select( '#D3line svg' );
if ( !svg ) {
svg = d3.select("#D3line").append("svg")
.attr("width", w)
.attr("height", h);
}
或者清除SVG所在元素的所有内容:
document.querySelector( '#D3line' ).innerHTML = '';
您还可以在添加新svg之前删除旧svg
d3.select("#D3line").selectAll("svg").remove();
var svg = d3.select("#D3line").append("svg")
.attr("width", w)
.attr("height", h);
d3.select("#D3line").selectAll("svg").remove();
var svg = d3.select("#D3line").append("svg")
.attr("width", w)
.attr("height", h);