I am using D3 to buld a bar chart (‘rect’) and update the chart based on data.
so far so good the chart updates when data changes. However, I am having issues with the transition() method. When I add the transition() and duration() the bars do not transitions/update from their current (x) position but appear from the left top corner for the window (browser) and moves to its default x position on the axis.
Any idea why?
this is my code:
plot.exit().remove();
const plotEnter = plot
.enter().append("g")
plotEnter.append("rect").attr('class', 'bar')
.on("mouseover", function(m, d) {
d3.select(this).style("fill", "orange")
return tooltip.style("visibility", "visible")
.style("left", m.clientX + "px")
.style("top", m.clientY + "px")
.style("opacity", ".9")
.html(toolTipHtml(d));
})
.on("mouseout", function(){
d3.select(this).style("fill", "steelblue")
return tooltip.style("visibility", "hidden");
})
.on("click", (m, d) => {
window.open(`http://${d.ipV4}`);
})
plot = plot.merge(plotEnter)
svg.selectAll("rect")
// .transition() works as expected without these, but when added, bars transition from top left corner!
// .duration(500)
.attr("x", function(d) { return x(d.roomName); })
.attr("y", function(d) { return y(extractSum(source, d)); })
.attr("height", function(d) { return height - y(extractSum(source, d)); })
.style("fill", "steelblue")
.attr("width", x.bandwidth() - 4)
.attr("transform", "translate(50,0)")
plot.attr("y", function(d) { return y(extractSum(source, d)); })
.attr("height", function(d) { return height - y(extractSum(source, d)); })