javascript - D3 Simple Bar Chart Not Updating -
i've got d3 bar chart created i'm uncertain how update it. data being updated when try run through .enter() , .exit() stuff different errors commonly .exit() function doesn't exist. point being not proper way update chart's svg.
i've provided codepen here relevant code below.
var b_margin = {top: 20, right: 20, bottom: 30, left: 100}, b_width = 450 - b_margin.left - b_margin.right, b_height = 200 - b_margin.top - b_margin.bottom; var x = d3.scale.ordinal() .rangeroundbands([0, b_width], .1); var y = d3.scale.linear() .range([b_height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left"); var barsvg = d3.select("body").append("svg") .attr("width", b_width + b_margin.left + b_margin.right) .attr("height", b_height + b_margin.top + b_margin.bottom) .append("g") .attr("transform", "translate(" + b_margin.left + "," + b_margin.top + ")"); createbarchart = function() { x.domain(bardata.map(function(d) { return d.age; })); y.domain([0, d3.max(bardata, function(d) { return d.population; })]); barsvg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + b_height + ")") .call(xaxis); barsvg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("frequency"); barsvg.selectall(".bar") .data(bardata) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.age) + 25; }) .attr("width", x.rangeband() - 50) .attr("y", function(d) { return y(d.population); }) .attr("height", function(d) { return b_height - y(d.population); }); function type(d) { d.population = +d.population; return d; } } updatebarchart = function() { // bar chart svg update bardata = [ {age: "title1", population: 50}, {age: "title2", population: 25}, {age: "title3", population: 70} ] barsvg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + b_height + ")") .call(xaxis); barsvg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("frequency"); barsvg.selectall(".bar") .data(bardata) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.age) + 25; }) .attr("width", x.rangeband() - 50) .attr("y", function(d) { return y(d.population); }) .attr("height", function(d) { return b_height - y(d.population); }); barsvg.exit().remove(); barsvg.attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }); } edit: updatebardata function looks this:
awesome tutorial here
idea is,first create empty selection , bind data it.
var bars = barsvg.selectall(".bar") .data(bardata) // bars empty data binded now, need create elements based on data attached.
var newbars = bars.enter(); // creates new elements newbars.apped("rect")......... // manipulation here to remove old elements, use exit selection
var obsoletebars = bars.exit(); //contains excess bars obsoletebars.remove(); // removes them hope helps.
var b_margin = {top: 20, right: 20, bottom: 30, left: 100}, b_width = 450 - b_margin.left - b_margin.right, b_height = 200 - b_margin.top - b_margin.bottom; var x = d3.scale.ordinal() .rangeroundbands([0, b_width], .1); var y = d3.scale.linear() .range([b_height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left"); var barsvg = d3.select("body").append("svg") .attr("width", b_width + b_margin.left + b_margin.right) .attr("height", b_height + b_margin.top + b_margin.bottom) .append("g") .attr("transform", "translate(" + b_margin.left + "," + b_margin.top + ")"); var bardata = [ { age: "public", population: 50 }, { age: "private, for-profit", population: 100 }, { age: "nonprofit", population: 25 } ]; createbarchart(); $('#btn').click(function() { updatebarchart(); }); function createbarchart() { x.domain(bardata.map(function(d) { return d.age; })); y.domain([0, d3.max(bardata, function(d) { return d.population; })]); barsvg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + b_height + ")") .call(xaxis); barsvg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("frequency"); barsvg.selectall(".bar") .data(bardata) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.age) + 25; }) .attr("width", x.rangeband() - 50) .attr("y", function(d) { return y(d.population); }) .attr("height", function(d) { return b_height - y(d.population); }); function type(d) { d.population = +d.population; return d; } } function updatebarchart() { var random = function() { return math.floor(math.random() * 70) + 30 }; // bar chart svg update bardata = [ { age: "public", population: random() }, { age: "private, for-profit", population: random() }, { age: "nonprofit", population: random() } ]; barsvg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + b_height + ")") .call(xaxis); barsvg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("frequency"); var bars = barsvg.selectall(".bar") .data(bardata); bars.enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.age) + 25; }) .attr("width", x.rangeband() - 50) .attr("y", function(d) { return y(d.population); }) .attr("height", function(d) { return b_height - y(d.population); }); bars.exit().remove(); bars.attr("y", function(d) { return y(d.population); }) .attr("height", function(d) { return b_height - y(d.population); }); }#btn { border: 2px solid #212121; width: 150px; text-align: center; padding: 15px; cursor: pointer; }<script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id='btn'>update</div>
Comments
Post a Comment