这是我的 D3js 代码
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.All i想要更新现有图表而不是复制图表。