javascriptのd3.jsでSVGをクリアするには

Question

d3.jsで最初のテストプログラムを作成しました。これまでのところ大丈夫です。 .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(); 

。しかし、このコードを凝視し、私はそれはSVGを削除し、それが戻ってこなかったこの

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

をしようとしたときに任意の結果

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); }); 

は得られなかった。このブロックの前に右のコードを配置する方法を熟考。私はこれがjavascriptのマージンとサイズを設定しているので、このトリックを使うには、私が全部持っているコードを書き換えて移動する必要があると仮定します。

ここに全体のjavascriptファイルがあります。この仕事をするために何を変えるべきか教えてください。コードスニペットと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; 
    } 
} 

EDIT：

私はここに提供ソリューションを試してみましたが、それはここで

を動作しませんでしたが、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のコメントで述べたように、入力/更新/終了パターンを使用する必要があります。

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

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

Answer 2

は、この機能を追加し、呼ばれたコントロールが問題を修正するたびに、それを呼び出すことが、あなたの疑問にお答えしますとsvg（SVGの下ですべてのもの）の内容をクリア。グラフはリセットされ、完全に再描画されます。グラフがアニメーション化され、新しい選択が行われるたびにバーが移動するといいですが、これで十分です：

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 + ")"); 
}