How to create dynamic line chart with d3 with data from websocket? - angularjs

Question

I'm trying d3 for the very first time and I'm trying to understand how to create a dynamic d3 line chart that needs to get updated every time I receive a websocket message from the server with new a new data point.
I have the below code within my angular directive link function:
var data = [];
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");
var yAxis = d3.svg.axis().scale(y)
.orient("left");
var valueline = d3.svg.line()
.x(function (d) { return x(d['label']); })
.y(function (d) { return y(d['value']); });
var svg = d3.select(elem[0])
.append("svg")
.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("path")
.attr("class", "line")
.attr("d", valueline(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
Statistics.listen('topic', function(message) {
data.push({
label: message.webEvent.creationTimeStamp,
value: +message.webEvent.value
});
x.domain(d3.extent(data, function (d) { return d.label; }));
y.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
var svg = d3.select(elem[0]).transition();
svg.select(".line") // change the line
.duration(0)
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(0)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(0)
.call(yAxis);
}
I'm not sure what the purpose of the "duration" is. The messages do not come through the socket at regular intervals. So I'm not sure if I should set a static duration value which I assume refreshes the graph based on the number given. I want the graph to update as and when I get an update. The graph, over time, should look like a running sine wave.
Right now, the first data that come gets rendered. But the graph stays static after that even though I can see incoming messages on the websocket and the data array is growing.
What am I missing? Any help is greatly appreciated.