Javacript/D3.js：ボタンをクリックするとデータが更新されず、代わりに新しい位置がプロットされます

Question

ボタンをクリックすると、赤い女性（ワクチン接種されていない）と青い女性（予防接種済み）値。現在ボタン上で赤い女性の更新をクリックしますが、青い女性は更新すべき場所に再作成されます。赤い女性のように、青い女性を変えて更新するにはどうすればいいですか？

Here you can see where the blue woman is recreated

は、私は2つのグローバル変数を作成しました：

var numOfPartner = 'zero'; 
var status = 0; 

ここ負荷にデータが作成されていると赤のイメージが導入されている場所です。

d3.csv("link to data", function(error, data) { 

    if (error) { 
     console.log("error reading file"); 
    } 

    data.sort(function(a, b) { 
     return d3.descending(+a.status, +b.status); 
    }); 

    // you should calculate using d3.max for your data 
    widthScale.domain([0, d3.max(data, function(d) { 
     return +d.start; 
    })]); 

    heightScale.domain(data.map(function(d) { 
     return +d.average; 
    }).slice(1)); 

    var rects = svg.selectAll("rect") 
    .data(([data[0]])) 
    .enter() 
    .append("rect"); 

    rects 
     .attr("x", 0) 
     .attr("y", function(d) { 
     return heightScale(d.status); 
     }) 
     .attr("width", function(d) { 
     return widthScale(+d.average); 
     }) 
     .attr("height", heightScale.rangeBand()); 

    svg.selectAll("text") 
     .attr("class", "label") 
     .data(([data[0]])) 
     .enter() 
     .append("text") 
     .text(function(d) { 
     return +d.average + " %"; 
     }) 
     .attr("x", function(d) { 
     return widthScale(+d.average) + 5; 
     }) 
     .attr('y', '-45') 
     .attr("fill", "#8a8c8e") 
     .attr("font-size", "24") 
     .attr("font-weight", "700") 

    // Style the axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
     .attr("fill", "#808285"); 

    // Label below x axis 
    svg.append("text") 
     .attr("class", "xlabel") 
     .attr("transform", "translate(" + width/2 + " ," + 
      height + ")") 
     .style("text-anchor", "middle") 
     .attr("dy", "0") 
     .text(" ") 
     .attr("fill", "#5582b0") 
     .attr("font-weight", "600"); 

    svg.selectAll("image1") 
     .data(([data[0]])) 
     .enter() 
     .append("svg:image") 
     .attr("x", function(d) { 
     return widthScale(+d.average) - 45; 
     }) 
     .attr('y', '-40') 
     .attr("height", 200) 
     .attr("width", 115) 
     .attr("xlink:href", "link to red woman"); 

ここで、関数f赤の女性が働くが、青がないか、ボタンの更新：

d3.selectAll("button").on("click", function() { 
    if (this.id == "unvaccinated") 
     status = 0; 
    else if (this.id == "vaccinated") { 
     status = 1; 
    } else { 
     numOfPartner = this.id; 
    } 
    svg.selectAll("image2") 
     .data(([data[1]])) 
     .enter() 
     .append("svg:image") 
     .attr("x", function(d) { 
      return widthScale(data[1][numOfPartner]) - 45; 
     }) 
     .attr('y', '-40') 
     .attr("height", 200) 
     .attr("width", 115) 
     .attr("xlink:href", "link to blue woman"); 


    rects 
     .data(data) 
     .transition() 
     .duration(1000) 
     .ease("linear") 
     .attr("width", function(d) { 
      return widthScale(data[status][numOfPartner]); 
     }); 

    svg.selectAll("text") 
     .data(([data[0]])) 
     .transition() 
     .duration(1000) 
     .ease("linear") 
     .attr("x", function(d) { 
      return widthScale(data[status][numOfPartner]) 
     }) 
     .text(function(d) { 
      return data[status][numOfPartner] + " %" 
     }); 

    svg.selectAll("image") 
     .data(([data[0]])) 
     .transition() 
     .duration(1000) 
     .ease("linear") 
     .attr("x", function(d) { 
      //get correct number  
      return widthScale(data[status][numOfPartner]) - 45; 
     }); 


    svg.selectAll("image2") 
     .data(([data[1]])) 
     .transition() 
     .duration(1000) 
     .ease("linear") 
     .attr("x", function(d) { 
      //get correct number  
      return widthScale(data[1][numOfPartner]) - 45; 
     }); 

    }); 

}); 

私は、上のボタンのクリック機能だけでなく、データが引かれているが、私は運がなかったと遊ぶことを試みました。

Answer 1

データやライブデモを見ることなく何が間違っているとは言い難いですが、クリックコールバックで問題が発生しています。 d3.csvコールバックにこのコードを移動：

svg.selectAll("image2") 
    .data(([data[1]])) 
    .enter() 
    .append("svg:image") 
    .attr("x", function(d) { 
     return widthScale(data[1][numOfPartner]) - 45; 
    }) 
    .attr('y', '-40') 
    .attr("height", 200) 
    .attr("width", 115) 
    .attr("xlink:href", "link to blue woman"); 

これはかなりのアップデートを行うことよりも、あなたのSVGに新たな要素を追加します。これは、クリックコールバックでは望んでいない可能性があります。これはどこかの初期化関数に入れなければなりません。コールバックの後半に正しい更新コードがありますが、新しい要素が追加されたため、期待どおりに機能しません。

もう1つのことは、データコールバックにimage1を使用し、クリックコールバックにimage1を使用していることに気付きました。これが正解であり、誤字ではないことを確認してください。