javascript - Using D3.js to create a bar chart that transforms on button click by loading tsv data -


i'm trying create bar chart using d3.js in order show population against different towns, however, i've found when try create transition between 2 different sets of data (in tsv format), d3.js won't trigger , fire off animation second set of data. i'm unsure of i'm doing wrong.

this current code have.

<div id="options">  <button id="set1">2016</button>  <button onclick="update2021()" id="set2">2021</button>  <button id="set2">2026</button>  <button id="set2">2031</button>  <button id="set2">2036</button>  <button id="set2">2041</button>  <button id="set2">2046</button>  <button id="set2">2050</button>  <svg width="3000" height="500"></svg>  <script>     var svg = d3.select("svg"),         margin = {top: 20, right: 20, bottom: 30, left: 40},         width = +svg.attr("width") - margin.left - margin.right,         height = +svg.attr("height") - margin.top - margin.bottom;      var x = d3.scaleband().rangeround([0, width]).padding(0.1),         y = d3.scalelinear().rangeround([height, 0]);      var g = svg.append("g")         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");      d3.tsv("sydtest.tsv", function(d) {       d.population = +d.population;       return d;     }, function(error, data) {       if (error) throw error;        x.domain(data.map(function(d) { return d.lga; }));       y.domain([0, d3.max(data, function(d) { return d.population; })]);        g.append("g")           .attr("class", "axis axis--x")           .attr("transform", "translate(0," + height + ")")           .call(d3.axisbottom(x));      // y-axis code       g.append("g")           .attr("class", "axis axis--y")           .call(d3.axisleft(y).ticks(25))        g.selectall(".bar")         .data(data)         .enter().append("rect")           .attr("class", "bar")           .attr("x", function(d) { return x(d.lga); })           .attr("y", function(d) { return y(d.population); })           .attr("width", x.bandwidth())           .attr("height", function(d) { return height - y(d.population); });     });  function update2021() {          // data again             d3.tsv("sydtest.tsv", function(d) {               d.population = +d.population;               return d;             }, function(error, data) {               if (error) throw error;          // scale range of data again          x.domain(data.map(function(d) { return d.lga; }));         y.domain([0, d3.max(data, function(d) { return d.population; })]);      // select section want apply our changes     var svg = d3.select("svg").transition();      // make changes         svg.select(".bar")   // change line             data(data)             .enter().append("rect")             .attr("class", "bar")             .attr("x", function(d) { return x(d.lga); })             .attr("y", function(d) { return y(d.population); })             .attr("width", x.bandwidth())             .attr("height", function(d) { return height - y(d.population); });         svg.select("axis--x") // change x axis             .duration(750)             .call(g);         svg.select("axis--y") // change y axis             .duration(750)             .call(g);     }); } </script> 

i've followed code has been written previously, , found y-axis , x-axis animate, data self wouldn't render on canvas. deduce i've written 'transition' part of code wrong.

if can show me if i've implemented transition code incorrectly, i'd grateful!


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -