d3.js：新しいデータセットとチャートをリフレッシュ

Question

私はD3のPCPチャートを作成し、ここに私のコードでいます

var m = [60, 10, 10, 60], 
     w = 1000 - m[1] - m[3], 
     h = 270 - m[0] - m[2]; 

var x=d3.scaleOrdinal() 
    .range([0, w]), 
     y = {}, 
     dragging = {}; 

    var line = d3.line(), 
     background, 
     foreground; 

var svg = d3.select("#test").append("svg:svg") 
     .attr("width", w + m[1] + m[3]) 
     .attr("height", h + m[0] + m[2]) 
     .append("svg:g") 
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

    //let dimensions 
    // Extract the list of dimensions and create a scale for each. 
    x.domain(this.dimensions = d3.keys(data[0]).filter(function(d) { 
     if (d === "name") return false; 
     if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") { 
     y[d] = d3.scaleOrdinal() 
      .domain(data.map(function(p) { 
      return p[d]; 
      })) 
      .range([h, 0]); 
     } else { 
     y[d] = d3.scaleLinear().domain([0, d3.max(data.map(function(p) { return p[d]; }))]).range([h, 0]); 
     } 
     return true; 
    })); 

    //alert(this.dimensions) 

    // Add grey background lines for context. 
    background = svg.append("svg:g") 
     .attr("class", "background") 
     .selectAll("path") 
     .data(data) 
     .enter().append("svg:path") 
     .style('fill', 'none') 
     .attr("d", path.bind(this)); 


    // Add blue foreground lines for focus. 
    foreground = svg.append("svg:g") 
     .attr("class", "foreground") 
     .selectAll("path") 
     .data(data) 
     .enter().append("svg:path") 
     .style('fill', 'none') 
     .style('stroke', 'steelblue') 
     .attr("d", path.bind(this)); 

    // Add a group element for each dimension. 
    let g = svg.selectAll(".dimension") 
     .data(this.dimensions) 
    .enter().append("svg:g") 
     .attr("class", "dimension") 
     .attr("transform", function(d) { 
     return "translate(" + x(d) + ")"; 
     }) 


    // Add an axis and title. 
    g.append("svg:g") 
     .attr("class", "axis") 
     .each(function(d) { 
     d3.select(this).call(d3.axisLeft(y[d])); 
     }) 
     .append("svg:text") 
     .attr("text-anchor", "middle") 
     .attr("y", -50) 
     .attr("x",-10) 
     .style("fill", "black") 
     .text(function(d) {return d }); 


    var firstAxis = d3.selectAll('g.dimension g.axis'); 

    firstAxis 
     .append("svg:image") 
     .attr('x',-20) 
     .attr('y',-60) 
     .attr('width', 40) 
     .attr('height', 60) 
     .attr("xlink:href", function(s) { 
     return "images/" + s+'.png'; 
     }); 

    function position(d) { 
     var v = dragging[d]; 
     return v == null ? x(d) : v; 
    } 

    function transition(g) { 
     return g.transition().duration(500); 
    } 

    // Returns the path for a given data point. 
    function path(d) { 
      return line(this.dimensions.map(function(p) { 
      return [position(p), y[p](d[p])]; 
     })); 

    } 

私がダウンして、いくつかの入力ドロップの表示に基づいて自分のWebページ上から簡単な入力を持っています新しいデータがスクリプトに設定されるたびに、選択した値を渡します。ユーザーがフォームの値を変更するたびに、新しいデータセットがスクリプトに送信されます。私はexitとremove機能を使用しようとした新しいデータセットでグラフを更新（リフレッシュ）する方法を考え出すのに苦労していますが、成功はあまりありません。

svg.exit().remove(); 

Answer 1

の終了方法：新たなデータが見つからなかった ための選択で、既存のDOM要素：

が出口の選択を返します。 （ の選択は、選択肢データによって返されません。）（API documentation）。

あなたが選択gのためのデータ、​​、およびbackgroundを指定しているが、あなたが選択svgのために任意のデータを指定していないので、終了の選択が空になります。したがって、.remove（）は何も削除できません。

---

終了選択を使用するには、終了選択で選択範囲の要素が削除されないことに注意してください。それはもはや対応する結合されたデータをもたない選択内の要素のサブセットの選択である。

選択肢に10個のDOM要素があり、選択のデータ配列が9個の要素を持つ配列に設定されている場合、出口選択には1つの要素、つまり余分な要素が含まれます。

このサブセットを.exit（）。remove（）で削除できます。出口は、もはや必要のない要素です。remove（）はそれらを削除します。 Exitは要素を削除することはありません（遷移や非表示など）。

前述のように、exit選択項目に値を設定するには、selection.data （）：

var selection = svg.selectAll("path") 
    .data(data); 

ここで、入力選択、終了選択、および更新の選択にアクセスできます。

キーを指定しない限り、入力選択項目または終了項目のいずれかに要素を含めることができます。余分な要素が必要な場合は、終了する必要はありません。

過剰の要素を削除するには、我々は今、使用することができます：あなたは、このような​​、background、およびgなどの他の選択のためのデータを指定している考える

var selection = svg.selectAll("path") 
    .data(data);  

selection.exit().remove(); 

は、これらは、（あなたが.exitを使用する必要があります選択されています）完全な入力/更新/終了サイクルの一部としてオンにする。 d3v4では、選択した既存の要素と新しい要素の操作を実行するために、更新をマージして選択項目を入力する必要があります。

---

しかし、あなたは、単にSVGを取り除くと（それはあなたがやりたいように見えるものである - あなたがSVGを削除しようとしているように）新鮮な起動したい場合は、単にSVGを削除することができます。

d3.select("#test") 
    .select("svg") 
    .remove(); 

ただし、チャート間でうまく移行したり、入力/更新/終了サイクルを利用することはできません。

なぜメモはsvg.remove（）を使用しますか？選択svgはg要素を保持しているので：

var svg = d3.select("#test") // returns a selection with #test 
     .append("svg:svg")  // returns a selection with the new svg 
     .attr(...)    // returns the selection with the newly created svg again 
     .append("svg:g")  // returns a selection with the new g 
     .attr(...);    // returns the selection with the newly created g again 

svgは、結果的にgの選択である、そしてそれはSVG要素は削除されません削除します。実際には、上記のコードブロックをsvg.remove()の後に実行すると、DOMに新しいsvg要素が追加され、古いものは削除されません。