D3 Scale graph as a new bar is added

Question

I am trying to scale my bars, so that none of them look abnormally large, are go out of scope. And I was able to accomplish this partly.

My problem comes in when I try to add data before I try to update current data, i.e. If I evoke addData before clickEvent, the rendering doesn't get scaled. Even after I repeatedly add data. It will only scale once I evoke the clickEvent function, and after that it scales every time it is rendered.

I am not sure, what I have been doing wrong, so any help would be appreciated.

Here's the jsfiddle link:

http://jsfiddle.net/NkkDC/4/

And here are the functions:

function clickEvent(d, i) {
    var op = prompt("Please enter the value", d);
    data[i] = parseInt(op, 10);
    render();

};    

function addData() {
    var op = prompt("Please enter the value", "");
    var len = data.length;
    data[len] = op;
    render();
}; 

In jsfiddle, my button doesn't seem to be prompting for a box when it is clicked. Help with that would be appreciated too.

Thank you! :)

Answer 1

Add the event to the button using d3 as well:

d3.select("button").on("click", function(d, i) {
    var op = prompt("Please enter the value", "");
    var newData = parseInt(op, 10);
    if (!isNaN(newData)) {
      data.push(newData);
      render();
    }
});