Updates
This was our original bar-chart.
var data = [120, 140, 150, 180] // define width is array
var chart = d3.select('svg') // select svg
.selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 30})
.attr('width', function(d) {return d})
.attr('height', 25)
Update data
Now, on click of
tag let's update the barchart with random data.
var data = [120, 140, 150, 180]
var chart = d3.select('svg').selectAll('rect')
.data(data).enter()
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) {return i * 30})
.attr('width', function(d) {return d})
.attr('height', 25)
d3.select("p")
.on("click", function() { // Event listener - later about that!
// create random data
data = random(4) // Custom function, we can write your own!
// update rect widths with enw data
d3.select('svg')
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.attr('width', function(d) {return d}) // visual attribute to be updated
})
Updating labels too
d3.select("p")
.on("click", function() { // Event listener - later about that!
// create random data
data = random(4) // Custom function, we can write your own!
// update rect widths with enw data
d3.select('svg')
.selectAll("rect") // select rects to be updated
.data(data) // New data binded to rects
.attr('width', function(d) {return d}) // visual attribute to be updated
d3.select('svg')
.selectAll("text") // select text tags to be updated
.data(data) // New data binded to elements
.attr('x', function(d) {return d-20}) // placed at new positions
.text(function(d) {return d}) // value updated
})