I am posting my solution as well (someone might find it useful). I have done similar approach to Yogesh's but I explicitly remove and add the elements again (don't know if that's the correct approach - maybe someone will point some errors to me).
function drawY(alarm_cnt, array) {
d3.selectAll(".circles").remove();
d3.selectAll(".y").remove();
d3.selectAll(".line").remove();
var data = createDataForD3( alarm_cnt , array);
var y_extent = [0, Math.round(
getMaxAlarmCountForHourInArray(alarm_cnt, array)[1] * 1.2 ) ];
var y_scale = d3.scale.linear()
.range([ height, 0])
.domain(y_extent);
var yAxis = d3.svg.axis()
.scale(y_scale)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x_scale(d.hour) ; })
.y(function(d) { return y_scale( Math.round( d.alarms)) ; });
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 8)
.attr("x", -20)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Alarms per hour");
svg.append("g")
.classed("y grid", true)
.call(yAxis
.tickSize(-width,0,0)
.tickFormat("")
)
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "circles")
.selectAll("circle")
.data(data)
.enter()
.append("circle");
d3.selectAll("circle")
.attr("cx", function(d){ return x_scale(d.hour); })
.attr("cy", function(d){ return y_scale( Math.round( d.alarms)); })
.attr("r", 6);
}
var margin = {top: 20, right: 20, bottom: 30, left: 70},
width = 0.85 * document.width - margin.left - margin.right,
height = 0.9 * document.height - margin.top - margin.bottom;
var schedule = [1, 2, 1, 2, 2, 2, 1, 4, 4, 3, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var alarm_count = 1000;
var data = createDataForD3( alarm_count , schedule);
var x_extent = [-0.8, 23.5];
var x_scale = d3.scale.linear()
.range([0, width])
.domain(x_extent);
var xAxis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.ticks(24);
var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom)
.attr("x", (width) / 2)
.text("Hour");
svg.append("g")
.classed("x grid ", true)
.attr("transform", "translate(0,"+height+")")
.call(xAxis
.tickSize(-height,0,0)
.tickFormat("")
);
drawY(alarm_count, schedule);
$("#alarm_count_input").val(alarm_count);
$("#alarm_count_input").change(function(){
drawY($("#alarm_count_input").val(), schedule);
});
});