D3js代码当调用两次重复图形而不是刷新 [英] D3js code when called twice duplicates the graph instead of refreshing

问题描述

这里是我的D3js代码

Here is my D3js code

    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 graphs.If我点击一次更多我得到3.我想要的是更新现有的图，而不是重复的图形。

i run the above code at the click of a button.When i click the button once the graph displays but if click it once again it shows another graph.So now i get 2 graphs.If i click once more i get 3.All i want is to update the existing graph instead of duplicating the graphs.

推荐答案

这里总是附加一个新的SVG元素（ .append（'svg'））：

Here you always append a new SVG element (.append('svg')):

var svg = d3.select("#D3line").append("svg")
                        .attr("width", w)
                        .attr("height", h);

因此，不是使用一个新的SVG元素第一个选择的图并覆盖它或再次选择SVG：

So instead of using a new SVG element (and thus a new graph), just maintain a link to the first selected graph and override it or select the SVG again:

   var svg = d3.select( '#D3line svg' );
   if ( !svg ) {

      svg = d3.select("#D3line").append("svg")
                                      .attr("width", w)
                                      .attr("height", h);
   }

或清除SVG所在的元素的所有内容： p>

Or you clear all content of you element, where the SVG resides:

document.querySelector( '#D3line' ).innerHTML = '';

这篇关于D3js代码当调用两次重复图形而不是刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！