CODEWITHSUNDEEP
d3.js
software_writer
software_writer

Reputation: 4468

D3 offset X-axis

I have a following bar chart in D3: bin

I want to add a little offset between y-axis and the first bar(next bars should be pushed accordingly). The same goes for x-axis labels. 0.0 should start from the same offset on x-axis. Is there a way to do it?

Ideally, it should look like this example: https://bl.ocks.org/mbostock/3885304

but this example uses ordinal scale and uses rangeRoundBands which I believe is adding that offset and I am using linear scale so I am not sure how to achieve the same effect. Any help is appreciated. Thanks.

Upvotes: 0

Views: 5693

Answers (1)

Mark
Mark

Reputation: 108557

Just change your domain to add a little padding:

xScale.domain([-0.1, (data.length - 1) * 1.1]);

Full code:

var data = [
    {
    amount:100,
    year: "2008"
     }, 
    {
     amount:300,
     year: "2009"
     }, 
    {
     amount:400, 
     year: "2010"
     }, 
    {
     amount:100,
     year: "2011"
     }];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

       // set up scales
        var xScale = d3.scale.linear()
            .range([0, width]);
        xScale.domain([-0.1, (data.length - 1) * 1.1]);

        var yMax = d3.max(data, function(d) { return d.amount; } );
        var yScale = d3.scale.linear()
            .range([height, 0]);
        yScale.domain([0, yMax]).nice();

        // set up axis
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickPadding(10);

        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .tickFormat((d) => d > 10000 ? Math.round(d / 1000000000).toString() + "K" : d);

        // set up svg and chart elements
        var container = d3.select('#chart');
        var svg = container.append("svg")
            .attr("id", "mySVG")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
        var chart = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // render the axes
        chart.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        chart.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end");

        // render the ractangles
        chart.selectAll(".bar")
            .data(this.data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d, i) { return xScale(i); })
            .attr("width", 50)
            .attr("y", function (d) { return yScale(d.amount); })
            .attr("height", function (d) { return height - yScale(d.amount); });
        
.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis text {
    font-size: 12px;
    fill: #666;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bar Chart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
  <div id="chart">

</div>
</body>
</html>

Upvotes: 1

Related Questions