D3棒グラフ更新

Question

私はD3を学習し、問題を持つ

let container = d3.select(this) 

    let x = d3.scaleBand().rangeRound([0, width]).padding(0.1) 
    let y = d3.scaleLinear().rangeRound([height, 0]) 

    x.domain(data.map(function(d) { 
    return d.x; 
    })); 

    y.domain([0, d3.max(data, function(d) { return d.y; })]) 

    // seems like everytime when there is a new data, a new "g" is appended 
    let g = container 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    const gEnter = g.selectAll('.bar') 
    .data(data) 

    gEnter.exit().remove() 

    gEnter.enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
     return x(d.x) 
    }) 
    .attr("y", function(d) { 
     return y(d.y) 
    }) 
    .attr('fill', barColor) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { 
     return height - y(d.y) 
    }) 

私の棒グラフを更新する私の目標は、新しいデータがそこに来ているとき、グラフ毎回更新することで、何をしています上記のコードは、現在のグラフの上に新しいグラフを追加し続けます。

どういうわけか私は何かが些細なことを見逃していると感じました。

ご協力ありがとうございます。

Answer 1

あなたはそれ以外の場合は、それが新しいgにこの機能が実行されるたびに作成され、この新しいgにselectAllを作る（およびその中には何も見つけていない）、機能を更新あなたのうち

let g = container 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

を移動する必要があり、すべてのデータに対してenter()の選択を実行します。あなたがに、例えば、あなたの構造を変更することができます

：

const svg = d3.select(this), 
    container = svg.append('g') 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

let x = d3.scaleBand().rangeRound([0, width]).padding(0.1) 
let y = d3.scaleLinear().rangeRound([height, 0]) 

function update(data){ 

    x.domain(data.map(function(d) { 
    return d.x; 
    })); 

    y.domain([0, d3.max(data, function(d) { return d.y; })]) 

    const gEnter = container.selectAll('.bar') 
    .data(data) 

    gEnter.exit().remove() 

    gEnter.enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
     return x(d.x) 
    }) 
    .attr("y", function(d) { 
     return y(d.y) 
    }) 
    .attr('fill', barColor) 
    .attr("width", x.bandwidth()) 
    .attr("height", function(d) { 
     return height - y(d.y) 
    }) 
} 

someAjaxCall().then(data => update(data)) 

あなたはあなたのコードを整理する方法についての概要を持っているマイク・ボストックによって作られたこのexampleを確認することができます。