CODEWITHSUNDEEP
javascriptd3.js
user5323957
user5323957

Reputation: 552

Transition In D3 Bar Graph Not Working

Learning To Create A GDP Bar Chart Using D3 Every Thing Is Working Fine Except Transition

/*
define margin followed by height & width for svg
*/
//define margin
var margin = {
    top:20,right:10,bottom:100,left:40
}
//define w & h
var w = 700 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;
/*
define svg by selecting the body and append the svg to body with proper 
height and width then appen it to g
*/
var svg = d3.select("body").
    append("svg").
    attr({
        "width": w + margin.left + margin.right,
        "height": h + margin.top + margin.bottom
    }).
    append("g").
    attr("transform", "translate(" + margin.left + "," + margin.right + ")");
/*
define scale then followed by axis
*/
//define x & y scale
var xScale = d3.scale.ordinal().
    rangeRoundBands([0, w], 0.2, 0.2);
var yScale = d3.scale.linear().
    range([h, 0]);
//define x & y axis
var xAxis = d3.svg.axis().
    scale(xScale).
    orient("bottom");
var yAxis = d3.svg.axis().
    scale(yScale).
    orient("left");
/*
import the data here we have csv data
*/
d3.csv("data.csv", function (error, data) {
    if (error) console.log("Error:Data Is Not Loaded");
    data.forEach(function (d) {
        d.country = d.country;
        d.gdp = +d.gdp;       
        console.log(d.gdp);  
    });
//sorting data
    data.sort(function (a, b) {
        return (b.gdp - a.gdp);
    });
//specify domains of x & y scale
    xScale.domain(data.map(function (d) { return d.country }));
    yScale.domain([0, d3.max(data, function (d) { return d.gdp })]);
//draw bars or bind data
    var rects = svg.selectAll("rect").
        data(data);
//enter data
    rects.enter().
        append("rect");
//transition
    rects.
        attr("height", 0).
        attr("y", h).
        transition().duration(3000).
        delay(function (d, i) {
            return i * 200;
        });
//update data
    rects.attr({
        "x": function (d) { return xScale(d.country); },
        "y": function (d) { return yScale(d.gdp); },
        "width": xScale.rangeBand(),
        "height": function (d) { return h - yScale(d.gdp) }
    });
//exit data
    rects.
        exit().
        remove();
//label the bar
    svg.selectAll("text").
        data(data).
        enter().
        append("text").
        text(function (d) {
            return (d.gdp);
        }).
        attr({
            "x": function (d) { return xScale(d.country) + xScale.rangeBand() / 2 },
            "y": function (d) { return yScale(d.gdp) + 12; }
        }).
        style({
            "fill": "white",
            "text-anchor":"middle"
        });
//draw the xAxis
    svg.append("g").
        attr("class", "x axis").
        attr("transform", "translate(0," + h + ")").
        call(xAxis).
        selectAll("text").
        attr("transform", "rotate(-60)").
        attr({
            "dx": "-.8em",
            "dy": ".25em"
        }).
        style("text-anchor", "end").
        style("font-size", "12px");
//draw the yAxis
    svg.append("g").
        attr("class", "y axis").
        call(yAxis).
        style("font-size","12px");
});
svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.axis path,.axis line {
    fill:none;
    stroke:#000;
    shape-rendering:crispEdges;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
<!DOCTYPE html>
<html>
<head>
    <title>D3 Tutorial Demo</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    
    <div class="container-fluid text-center">
        <h1>Bar Graph - 2015 GDP Based On PPP Valuation</h1>
    </div>
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

Here Is My data.csv File Loos Like

country,gdp
Brazil,3.20
Italy,2.17
India,8.02
Saudi Arebia,1.13
Russa,3.47
Italy,2.17
Australia,1.13
Spain,1.68
Korea,1.84
United States,17.9
China,19.51
Japan,4.84
Germany,3.84
Turkey,1.57
United Kingdom,2.66

Here Is My Out Put Looks Like

enter image description here

Can Any One Point Out Why MY Transition Is Not Working Thanks In Advance.

Upvotes: 1

Views: 179

Answers (1)

Mark
Mark

Reputation: 108537

While you are creating it , you aren't running anything in your transition:

  rects.
    attr("height", 0).
    attr("y", h).
    transition().duration(3000).
    delay(function (d, i) {
        return i * 200;
    }); //<-- nothing to do  here....

If you want it to run on your updates, say to make the bar grow, just move it:

rects
  .attr({
    "x": function (d) { return xScale(d.country); },
    "y": function (d) { return yScale(d.gdp); },
    "width": xScale.rangeBand()
  })
  .transition() //<-- transition to act on height
  .attr("height", function (d) { return h - yScale(d.gdp) });

Upvotes: 1

Related Questions