Skip to content

Instantly share code, notes, and snippets.

Last active December 15, 2015 06:09
What would you like to do?
rangeRoundBands v rangeBands

I was confused how rangeRoundBands differed from rangeBands so made this example

<!DOCTYPE html>
<title>Ordinal scale - rangeRoundBands</title>
<style type="text/css">
body {
text-align: center;
svg {
border: 1px solid #f90;
margin: 32px;
<script src=""></script>
<script type="text/javascript">
var width = 640,
height = 320
var svg ='svg')
.attr('width', width)
.attr('height', height)
var data = d3.range(51)
var x = d3.scale.ordinal()
.rangeRoundBands([0, width])
var colors = d3.scale.category20()
.attr('class', 'example1')
.style('fill', colors)
.attr('x', function(d) { return x(d) })
.attr('y', 50)
.attr('width', x.rangeBand())
.attr('height', 50)
var x = d3.scale.ordinal()
.rangeBands([0, width])
.attr('class', 'example2')
.style('fill', colors)
.attr('x', function(d) { return Math.round(x(d)) })
.attr('y', 150)
.attr('width', Math.round(x.rangeBand()))
.attr('height', 50)
Copy link

This has been very useful for debugging a d3 error, thanks! It is strange that rangeRoundBands does not fill the entire space compared to doing a manual round later on rangeBands. Do you have any insights on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment