按钮上的javascript加载和卸载功能已选中

I want to load some graphs from different data soruces (function1 and function2) depending on what input is checked but when a input have been clicked and then I click the other one the first graphs don't go away so the new graphs are appended above the old ones like the image shows. Also one of the inputs is checked by default but it doesn't load the data at first.

身体parth：

<div>
  <h3>graphs</h3>
  <label>
    <input id="func1" type="checkbox" class="radio"  name="fooby[1][]" checked onchange='function1(this)'/>function 1</label>
  <label>
    <input id="func2" type="checkbox" class="radio"  name="fooby[1][]" onchange='function2(this)'/>function 2</label>
</div>
<!-- graphs -->
<div class="container">
    <div id="donut"><h3>donut chart</h3></div>
    <div id="bars" ><h3>bar chart</h3></div>
</div>

脚本：

function function1(obj) {
  if($(obj).is(":checked")){
    d3.csv("data.csv", function(error, data) {
    if (error) throw error;
    }
    ///do some stuff
  }      
}

function function2(obj) {
  if($(obj).is(":checked")){
    d3.csv("data2.csv", function(error, data) {
    if (error) throw error;
    }
    ///do some stuff
  }      
}

这些图是用D3js制作的