4 function tick(paths, line, axes, x, y, ids, tag) {
5 var transition = d3.select(tag).transition()
8 transition = transition.each(
function () {
12 x.domain([now - (n - 1) * duration, now]);
14 var extent = [0x1000000, 0];
15 for (var name in ids) {
16 var group = ids[name];
17 var thisExtent = d3.extent(group.data, function (d) {
return d.value; });
18 if (thisExtent[0] < extent[0]) { extent[0] = thisExtent[0]; }
19 if (thisExtent[1] > extent[1]) { extent[1] = thisExtent[1]; }
21 y.domain([extent[0] * 98 / 100, extent[1] * 102 / 100]);
23 for (var name in ids) {
24 d3.json(ids[name].jsonPath,
function (json) {
25 ids[json.name].data.push({ value: json.value, time:
new Date(json.time) });
29 ids[name].path.attr(
"d", line).attr(
"transform", null);
36 for (var name in ids) {
41 .attr(
"transform",
"translate(" + x(now - n * duration) +
")");
44 for (var name in ids) {
45 while (ids[name].data.length > 0 && ids[name].data[0].time < now - n * duration) {
46 ids[name].data.shift();
50 }).transition().each(
"start",
function () { setTimeout(tick(paths, line, axes, x, y, ids, tag), (duration * 3) / 4) });
53 function makeGraph(tag, ids) {
54 var now =
new Date(Date.now() - duration);
56 var margin = { top: 6, right: 20, bottom: 20, left: 60 },
57 width = $(tag).width() - margin.right - margin.left,
58 height = 120 - margin.top - margin.bottom;
60 var x = d3.time.scale()
63 var y = d3.scale.linear()
66 var line = d3.svg.line()
67 .interpolate(
"linear")
68 .x(
function (d) {
return x(d.time); })
69 .y(
function (d) {
return y(d.value); });
71 var svg = d3.select(tag).append(
"svg")
72 .attr(
"width", width + margin.left + margin.right)
73 .attr(
"height", height + margin.top + margin.bottom)
74 .style(
"margin-left", -margin.right +
"px")
76 .attr(
"transform",
"translate(" + margin.left +
"," + margin.top +
")");
78 svg.append(
"defs").append(
"clipPath")
79 .attr(
"id",
"clip" + tag.replace(
'#',
""))
82 .attr(
"height", height);
84 var xaxis = svg.append(
"g")
85 .attr(
"class",
"x axis")
86 .attr(
"transform",
"translate(0," + height +
")")
87 .call(x.axis = d3.svg.axis().scale(x).orient(
"bottom"));
89 var formatTick =
function (d) {
90 var prefix = d3.formatPrefix(d);
91 return prefix.scale(d) +
" " + prefix.symbol +
"B/s";
93 var yaxis = svg.append(
"g")
94 .attr(
"class",
"y axis")
95 .attr(
"transform",
"translate(0,0)")
96 .call(y.axis = d3.svg.axis().scale(y).tickFormat(formatTick).orient(
"left"));
98 var paths = svg.append(
"g")
99 .attr(
"clip-path",
"url(#clip" + tag.replace(
'#',
"") +
")");
101 for (var name in ids) {
102 ids[name].path = paths.append(
'path')
103 .data([ids[name].data])
104 .attr(
'class',
'line')
105 .style(
'stroke', ids[name].color);
108 tick(paths, line, [xaxis, yaxis], x, y, ids, tag);