如何清除JavaScript中的d3.js中的SVG

Question

我剛剛在d3.js中創建了我的第一個測試程序。到目前爲止它工作正常。它創建rects來說明從.csv文件讀取的數據，如果用戶選擇不同的數據，則會加載新的數據集。但它寫它的是什麼已經有頂，

這段代碼，但不清除的是已經存在

barsM = svg.selectAll(".bar").data(dataMale).enter(); 


    barsF = svg.selectAll(".bar").data(dataFemale).enter() 


    barsM.append("rect") 
     .attr("class", "bar1") 
     .attr("x", function (d) { return x(d.age_group); }) 
     .attr("width", x.rangeBand()/2) 
     .attr("y", function (d) { return y(d.mean * 100); }) 
     .attr("height", function (d, i, j) { return height - y(d.mean *100); }); 

    barsF.append("rect") 
     .attr("class", "bar2") 
     .attr("x", function (d) { return x(d.age_group) + x.rangeBand()/2; }) 
     .attr("width", x.rangeBand()/2) 
     .attr("y", function (d) { return y(d.mean * 100); }) 
     .attr("height", function (d, i, j) { return height - y(d.mean * 100); }); 

你可以看到在行動計劃在這裏

http://www.gelsana.com/IHME/blog/

寫入新圖

如何清除圖形？我不明白使用數據而不是數據的代碼。

我會認爲這會工作

svg.selectAll(".bar").data(data).exit().remove(); 

barsM = svg.selectAll(".bar").data(dataMale).enter(); 
barsF = svg.selectAll(".bar").data(dataFemale).enter(); 

或本

svg.selectAll(".bar").data(dataMale).exit().remove();      
svg.selectAll(".bar").data(dataFemale).exit().remove(); 

barsM = svg.selectAll(".bar").data(dataMale).enter(); 
barsF = svg.selectAll(".bar").data(dataFemale).enter(); 

我認爲，如果有追加，會有一個刪除。但在這個代碼盯着琢磨如何把正確的代碼塊之前沒有取得任何結果

barsM.append("rect") 
    .attr("class", "bar1") 
    .attr("x", function (d) { return x(d.age_group); }) 
    .attr("width", x.rangeBand()/2) 
    .attr("y", function (d) { return y(d.mean * 100); }) 
    .attr("height", function (d, i, j) { return height - y(d.mean *100); }); 

barsF.append("rect") 
    .attr("class", "bar2") 
    .attr("x", function (d) { return x(d.age_group) + x.rangeBand()/2; }) 
    .attr("width", x.rangeBand()/2) 
    .attr("y", function (d) { return y(d.mean * 100); }) 
    .attr("height", function (d, i, j) { return height - y(d.mean * 100); }); 

當我嘗試這樣做

svg.selectAll("*").remove(); 

它去掉了SVG和它沒有回來。我認爲這是因爲我在javascript中設置了事物的邊距和大小，所以使用這個技巧會涉及重寫和移動我所有的代碼。

這是整個JavaScript文件。請告訴我該做什麼改變。代碼snippits和刷新按鈕內容清除svg不起作用。

var margin = {top: 20, right: 50, bottom: 100, left: 75}, 
    width = 740 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var y = d3.scale.linear().domain([300, 1100]).range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left"); 

var svg = d3.select("#chart-svg").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("class", "graph") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var _location = "USA"; 
var _year = "1990"; 
var _metric = "obese"; 

function loadCountry(inputcountry) 
{ 
    //d3.selectAll("svg > *").remove(); 
    _location = inputcountry; 
    load(); 
} 

function loadYear(inputyear) 
{ 
    //d3.selectAll("svg > *").remove(); 
    _year = inputyear; 
    load(); 
} 

function loadMetric(inputmetrice) 
{ 

    _metric = inputmetrice; 
    load(); 
} 

var headers = [ "Male", "Female"]; 

function load() { 

    d3.csv("../database/IHME_GBD_2013_OBESITY_PREVALENCE_1990_2013_Y2014M10D08.CSV", type, function (error, data) 

    { 
     var dataMale = data.filter(function (d) { 
       return (d.location == _location) && 
         (d.year == _year) && 
         (d.metric == _metric) && 
         (d.sex_id == 1) 
        }); 

     var dataFemale = data.filter(function (d) { 
        return (d.location == _location) && 
         (d.year == _year) && 
         (d.metric == _metric) && 
         (d.sex_id == 2) 
         }); 


     x.domain(data.map(function (d) { return d.age_group; })); 
     y.domain([0, d3.max(data, function (d) { return d.mean * 100; })]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
        .selectAll("text") 
         .style("text-anchor", "end") 
         .attr("dx", "-.16em") 
         .attr("dy", ".15em") 
         .attr("transform", function(d) { 
          return "rotate(-65)" 
       }); 

     svg.append("g") 
      .attr("class", "y axis axisLeft") 
      .attr("transform", "translate(0,0)") 
      .call(yAxisLeft) 
      .append("text") 
      .attr("y", 6) 
      .attr("dy", "-2em") 
      .style("text-anchor", "end") 
      .text("Mean"); 

     svg.selectAll(".bar").data(data).exit().remove(); 


     barsM = svg.selectAll(".bar").data(dataMale).enter(); 
     barsF = svg.selectAll(".bar").data(dataFemale).enter(); 

     barsM.append("rect") 
      .attr("class", "bar1") 
      .attr("x", function (d) { return x(d.age_group); }) 
      .attr("width", x.rangeBand()/2) 
      .attr("y", function (d) { return y(d.mean * 100); }) 
      .attr("height", function (d, i, j) { return height - y(d.mean *100); }); 

     barsF.append("rect") 
      .attr("class", "bar2") 
      .attr("x", function (d) { return x(d.age_group) + x.rangeBand()/2; }) 
      .attr("width", x.rangeBand()/2) 
      .attr("y", function (d) { return y(d.mean * 100); }) 
      .attr("height", function (d, i, j) { return height - y(d.mean * 100); }); 



     var color = d3.scale.ordinal() 
      .domain([0, 1]) 
      .range(["#ff0000", "#0000ff"]); 

     var legend = svg.selectAll(".legend") 
      .data(headers.slice().reverse()) 
       .enter().append("g") 
       .attr("class", "legend") 
       .attr("transform", function (d, i) { return "translate(-20," + i * 20 + ")"; }); 

     legend.append("rect") 
      .attr("x", width - 18) 
      .attr("width", 18) 
      .attr("height", 18) 
      .style("fill", color); 

     legend.append("text") 
       .attr("x", width - 24) 
       .attr("y", 9) 
       .attr("dy", ".35em") 
       .style("text-anchor", "end") 
       .text(function (d) { return d; }); 


     var tooltip = svg.append("g") 
      .attr("class", "tooltip"); 

     tooltip.append("rect") 
      .attr("width", 30) 
      .attr("height", 20) 
      .attr("fill", "red") 
      .style("opacity", 0.5); 

     tooltip.append("text") 
      .attr("x", 15) 
      .attr("dy", "1.2em") 
      .style("text-anchor", "middle") 
      .attr("font-size", "12px") 
      .attr("font-weight", "bold"); 
    }); 

    function type(d) { 
     d.mean = +d.mean; 
     return d; 
    } 
} 

編輯：

我想一個解決方案提供在這裏並沒有奏效

這裏是URL

http://www.gelsana.com/IHME/echonax/

的HTML

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylefile.css"> 
</head> 
<body> 

<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
<script type="text/javascript" src="thejsfile.js"></script> 
<svg id="graphContainer" class="graphContainer"> 
    <circle r="10" cx="50" cy="50" ></circle> 
</svg> 

<button> 
remove svg contents 
</button> 

</body> 
</html> 

這裏是JavaScript文件

var svg = d3.select('svg'); 
var btn = d3.select('button'); 


btn.on('click',()=>{ 
    svg.selectAll("*").remove(); 
}); 

，這裏是CSS文件

svg{ 
    height:500px; 
    width:500px; 
    background: gray; 
} 
path.link { 
    fill: none; 
    stroke: #666; 
    stroke-width: 1.5px; 
} 

circle { 
    fill: #ccc; 
    stroke: #333; 
    stroke-width: 1.5px; 
} 

text { 
    font: 10px sans-serif; 
    pointer-events: none; 
} 

text.shadow { 
    stroke: #fff; 
    stroke-width: 3px; 
    stroke-opacity: .8; 
} 

body { 
    background-color: white; 
    margin: 0px; 
} 

.graphContainer { 
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; 
} 

當我裝這在互聯網上點擊按鈕，它沒有做任何事情。

我想我的下一步將嘗試找到您使用此更新週期的此示例代碼。作爲PatelGatnan說，我想我錯過了進入和退出部分

這些新增什麼也沒做。該程序在新選擇後仍然不刷新。

Answer 1

正如@PavelGatnar在評論中提到的那樣，您應該使用enter/update/exit模式。但是，爲了回答你的問題，你清除svg（下SVG一切）與內容：

d3.select(".graph").selectAll("*").remove(); 

例子：https://jsfiddle.net/rqqko9hd/3/

Answer 2

加入這個功能，把它當一個被稱爲控制固定的問題。圖形重置並完全重繪。這將是很好，如果圖是動畫和酒吧移動時，只要有新的選擇，但這已經足夠好了：

function resetchart() 
{ 
    d3.select("svg").remove(); 
    svg = d3.select("#chart-svg").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("class", "graph") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
}