When the user clicks a button, both the red woman (unvaccinated) and the blue woman (vaccinated) should be updated to reflect the new value. At present, when the button is clicked, the red woman updates correctly but the blue woman is recreated in the location where it should be updated. How can I make the blue woman transition and update like the red woman?
You can observe the issue of the blue woman being recreated at this link:
https://i.sstatic.net/AFCSE.png
I have defined two global variables:
var numOfPartner = 'zero';
var status = 0;
Here is where the initial data is loaded and the red image is introduced:
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);
});
// Calculation using d3.max for the data is recommended
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")
// Styling 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");
This is the function for updating the button, which works for the red woman but not for the blue woman:
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) {
return widthScale(data[status][numOfPartner]) - 45;
});
svg.selectAll("image2")
.data(([data[1]]))
.transition()
.duration(1000)
.ease("linear")
.attr("x", function(d) {
return widthScale(data[1][numOfPartner]) - 45;
});
});
});
I've experimented with the on-button click function and the data retrieval, but so far no success has been achieved.