The color of the bars don't match the width of bars

[Kai-Ting Huang]

Hi all,

I'm new to D3. I've set up a simple bar chart. You can toggle two sets of data dynamically. See the code in https://codepen.io/kaitinghuang/pen/WXKorp

The problem I'm facing is that although the width of the bars do change dynamically, the color of the bars don't seem to match the width (See attachment). This problem goes away when I make the data range of x smaller. (Ex: changing "500" to "300" in the following code solves the problem).

var x = d3.scaleLinear()

    .range([0, 500])

.domain([0, maxCount]);

I've spent quite a long time but still can't wrap my head around this. Please help! Thanks a lot!!

Cheers,

Kaiting

[Kai-Ting Huang]

Found the answer myself. Turned out that I have to set the svg width to 500px in css to match the range.