Skip to content

Instantly share code, notes, and snippets.

@aubergene
Last active December 15, 2015 06:09
Show Gist options
  • Save aubergene/5214125 to your computer and use it in GitHub Desktop.
Save aubergene/5214125 to your computer and use it in GitHub Desktop.
rangeRoundBands v rangeBands

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

<!DOCTYPE html>
<html>
<head>
<title>Ordinal scale - rangeRoundBands</title>
<style type="text/css">
body {
text-align: center;
}
svg {
border: 1px solid #f90;
margin: 32px;
}
</style>
</head>
<body>
<svg></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var width = 640,
height = 320
var svg = d3.select('svg')
.attr('width', width)
.attr('height', height)
var data = d3.range(51)
var x = d3.scale.ordinal()
.domain(data)
.rangeRoundBands([0, width])
var colors = d3.scale.category20()
svg.selectAll('rect.example1')
.data(data)
.enter()
.append('rect')
.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()
.domain(data)
.rangeBands([0, width])
svg.selectAll('rect.example2')
.data(data)
.enter()
.append('rect')
.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)
</script>
</body>
</html>
@JaimieMurdock
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