D3 Examples - rangeRoundBands v rangeBands

xxxxxxxxxx
 
<!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="https://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>
​
​
    