Ui problem with d3 bar chart

Ui problem with d3 bar chart


so this my data visualization project

the problem i currently facing is when i zoom the chrome browser 110% the bar chart is smooth like this

but when the browser is 100% zoom it shows some small white line between the bars like this

what could possibly caused this type of problem ?


To have no gaps your maxwidth would have to be evenly divisible by your totalData. I suspect floating point inaccuracies. You could try to set the barwidht to 1+maxWidth/totalData if you always want it smooth or substract 1 if you always want the gap.


wow man great catch
it didnt even occur in my head
i just use Math.round() its works just fine

thanks for taking look at the code .