D3 update dataset on click and redraw the bar chart

user2159121 picture user2159121 · Mar 12, 2013 · Viewed 7.4k times · Source

I am new to d3 as well as javascript, and I am having trouble updating the dataset, as well as redrawing the bars. This is the code I have been looking at so far.

http://jsfiddle.net/TwEhT/2/

I have a function clickEvent, that is evoked upon a click on any bar. This function prompts for a value.

function clickEvent() 
{
    var op = prompt("Please enter the value", "");
};

What I need to do is to update the dataset at the index of the click, and redraw the rects so that they will reflect the change to the dataset.

Any help would be appreciated. Thanks.

Answer

findango picture findango · Mar 12, 2013

For a very simple example, you could update the dataset directly, and put the bar drawing code in a render() function that you can call to re-render the changes.

var dataset = [...];

function render() {
    // bind dataset to rects and draw here
}

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

Here's a running example in your code: http://jsfiddle.net/findango/TwEhT/4/