CODEWITHSUNDEEP
javascriptd3.jssvg
Jacob Johnson
Jacob Johnson

Reputation: 581

Updating data in D3 stacked bar graph

I have a new set of data that I want to have updated within the SVG but I'm not really sure how to correctly grab the elements I have replace the data while smoothly transitioning.

http://codepen.io/jacob_johnson/pen/jAkmPG

All relevant code is in the CodePen above; however, I will post some of it here.

// Array to supply graph data
var FOR_PROFIT = [10,80,10];
var NONPROFIT = [60,10,30];
var PUBLIC = [40,40,20];

var data = [
            {
        "key":"PUBLIC",
        "pop1":PUBLIC[0],
        "pop2":PUBLIC[1],
        "pop3":PUBLIC[2]
      },
            {
        "key":"NONPROFIT",
        "pop1":NONPROFIT[0],
        "pop2":NONPROFIT[1],
        "pop3":NONPROFIT[2]
      },
            {
        "key":"FORPROFIT",
        "pop1":FOR_PROFIT[0],
        "pop2":FOR_PROFIT[1],
        "pop3":FOR_PROFIT[2]
      }
];

I have two data arrays (one called data and another called data2 with modified information). I essentially want to transition the created graph into the new data. I understand enough to rewrite the graph over the old graph but I am not getting any transitions and am obviously just printing new data on top of the old instead of modifying what I have.

var n = 3, // Number of layers
        m = data.length, // Number of samples per layer
        stack = d3.layout.stack(),
        labels = data.map(function(d) { return d.key; }),       
        layers = stack(d3.range(n).map(function(d)
        { 
            var a = [];
            for (var i = 0; i < m; ++i)
            {
                a[i] = { x: i, y: data[i]['pop' + (d+1)] };  
            }
            return a;
        })),
        // The largest single layer
        yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
        // The largest stack
        yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

    var margin = {top: 40, right: 10, bottom: 20, left: 150},
        width = 677 - margin.left - margin.right,
        height = 212 - margin.top - margin.bottom;

    var y = d3.scale.ordinal()
        .domain(d3.range(m))
        .rangeRoundBands([2, height], .08);

    var x = d3.scale.linear()
        .domain([0, yStackMax])
        .range([0, width]);

    var color = d3.scale.linear()
        .domain([0, n - 1])
        .range(["#aad", "#556"]);

    var svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var layer = svg.selectAll(".layer")
        .data(layers)
        .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) {
            return color(i);
        });

    layer.selectAll("rect")
        .data(function(d) {
            return d;
        })
        .enter().append("rect")
        .attr("y", function(d) {
            return y(d.x);
        })
        .attr("x", function(d) {
            return x(d.y0);
        })
        .attr("height", y.rangeBand())
        .attr("width", function(d) {
            return x(d.y);
        });

This is what is handling the creation of my graph with its layers being the individual bars. Now I've seen this: https://bl.ocks.org/mbostock/1134768 but I still don't understand as its not very well commented.

Any guidance, links, or help in this would be amazing. Thanks.

Upvotes: 0

Views: 39

Answers (1)

typhon
typhon

Reputation: 1026

Your Solution: http://codepen.io/typhon/pen/bZLoZW

Hope this helps!!

You can slow down the speed of transition by increasing parameter passed to duration(500) at line 200.(and vice versa)

Read update, enter and exit selections. They are handy almost all the time while working with D3. Take this for reference.

Upvotes: 2

Related Questions