function Loadlinechart (ElementID, DataSet) {var svg = D3.select ("#" + ElementID);
var STRs = svg.attr ("Viewbox"). Split ("");
alert (dataset);
var width = strs[2];
var height = strs[3];
Outer box var padding = {top:50, right:50, bottom:50, left:50};
var names = new Array ();
Calculates the maximum value of GDP var gdpmax = 0;
for (var i = 0; i < dataset.length. i++) {var CURRGDP = D3.max (DATASET[I].GDP, function (d) {return d[1];
});
if (Currgdp > Gdpmax) gdpmax = CURRGDP;
var gdpnumb = dataset[0].gdp.length;
for (var j = 0; J < Gdpnumb J + +) {Names[j] = (dataset[0].gdp[j]) [0];
alert (names);
var XScale = d3.scale.linear () domain ([Watts, 2013]). Range ([0, Width-padding.left-padding.right]);
var XScale = d3.scale.ordinal ()//. Domain (names)//. Rangeroundbands ([0, Width-padding.left-padding.right]);
var Yscale = d3.scale.linear (). Domain ([0, Gdpmax * 1.1]). Range ([Height-padding.top-padding.bottom, 0]); Create a line builder var Linepath = D3.svg.line (). x (function (d) {return XScale (d[0]);
}. Y (function (d) {return Yscale (d[1]);
}). interpolate ("basis");
Defines two colors var colors = [D3.rgb (0, 0, 255), D3.rgb (0, 255, 0)]; Add path Svg.selectall ("path")//Select all <path>. Data (DataSet)/binding data in <svg>. Enter ()//Select the Enter section. Append ("Path ")//Add a sufficient number of <path> elements. attr (" transform "," translate "(" + Padding.left + "," + Padding.top + ")). attr (" D ", function
(d) {return Linepath (D.GDP);//back to the path generated by the line Builder})
. attr ("Fill", "none"). attr ("Stroke-width", 3). attr ("Stroke", function (d, i) {return colors[i];
});
Add snaplines perpendicular to x-axis var vline = svg.append ("line"). attr ("Class", "Focusline"). Style ("Display", "none");
Add a prompt box var tooltip = D3.select ("Body"). Append ("div"). attr ("Class", "ToolTip"). Style ("opacity", 0.0);
var title = Tooltip.append ("div"). attr ("Class", "title");
var des = Tooltip.selectall (". Des"). Data (DataSet). Enter (). Append ("div"); var descolor = des.append ("div"). atTR ("Class", "Descolor");
var destext = des.append ("div"). attr ("Class", "Destext"); Adds a transparent rectangular svg.append ("rect") for monitoring mouse events. attr ("Class", "overlay"). attr ("x", Padding.left). attr ("Y", padding.top). at TR ("width", width-padding.left-padding.right). attr ("height", Height-padding.top-padding.bottom). On ("MouseOver" , function () {Tooltip.style ("left", (D3.event.pageX) + "px"). Style ("Top", (D3.event.pageY +) + "px"). Style ("Opac
ity ", 1.0);
Vline.style ("display", null);
}. On ("Mouseout", function () {Tooltip.style ("opacity", 0.0);
Vline.style ("Display", "none");
}). On ("MouseMove", MouseMove);
function MouseMove () {*//the source array var data = DATASET[0].GDP When the mouse is sliding inside the transparent rectangle;
Gets the coordinates of the mouse relative to the upper-left corner of the transparent rectangle, and the upper-left corner coordinates (0,0) var mousex = D3.mouse (this) [0]-padding.left;
var mousey = D3.mouse (this) [1]-padding.top;
The value in the original data is computed by the inverse function of the scale, for example, X0 is a year, y0 is the GDP value var x0 = Xscale.invert (mousex);
var y0 = Yscale.invert (Mousey); Rounded to x0, 2006 if X0 is 2005.6, and 2 if 2005.2005 x0 = math.round (x0);
Finds the value x0 in the original array and returns the index number var bisect = D3.bisector (function (d) {return d[0];
}). Left;
var index = bisect (data, x0);
Get years and GDP data var year = x0;
var GDP = []; for (var k = 0; k < dataset.length; k++) {Gdp[k] = {country:dataset[k].country, Value:dataset[k].gdp[index]
[1]};
//Set the caption text (year) of the Cue box ("<strong>" + year + "title.html </strong>");
Sets the color of the color tag descolor.style ("Background-color", function (d, i) {return colors[i];
}); Sets the content of the description text destext.html (function (d, i) {return gdp[i].country + "T" + "<strong>" + Gdp[i].value + "</stron
G> ";
});
Set the position of the prompt box Tooltip.style ("Left", (D3.event.pageX) + "px"). Style ("Top", (D3.event.pageY +) + "px");
Gets the x coordinate of the vertical snapline var vlx = XScale (data[index][0]) + padding.left;
Sets the start and end points for vertical snaplines vline.attr ("x1", VLX). attr ("Y1", Padding.top). attr ("X2", VLX). attr ("y2", height-padding.bottom);
} var markstep = 80; var Gmark = Svg.selectall (". Gmark"). DaTA (DataSet). Enter (). Append ("G"). attr ("Transform", function (d, i) {return "Translate (" + (Padding.left + i * mark
Step) + "," + (Height-padding.bottom + 40) + ")";
}); Gmark.append ("rect"). attr ("X", 0). attr ("Y", 0). attr ("width"). attr ("height"). attr ("Fill", function (d, i)
{return colors[i];
}); Gmark.append ("text"). attr ("DX"). attr ("dy", ". 5em"). attr ("Fill", "Black"). Text (function (d) {return d.country
;
});
X-axis var xaxis = D3.svg.axis (). Scale (XScale). Ticks (5). Tickformat (D3.format ("D")). Orient ("bottom");
Y-axis var yaxis = D3.svg.axis (). Scale (Yscale). Orient ("left"); Svg.append ("G"). attr ("Class", "axis"). attr ("transform", "translate (" + Padding.left + "," + (Height-padding.bottom)
+ ")"). Call (Xaxis); Svg.append ("G"). attr ("Class", "Y axis"). attr ("transform", "translate" ("+ Padding.left +", "+ Padding.top +")). Cal
L (YAxis); function Updatelinechart () {this.update = function (updatedata) {//xscale. Domain (Updatedata,function (d) {return d.name});
var numvalues = updatedata.length;
var Updategdpmax = 0;
for (var i = 0; i < updatedata.length. i++) {var CURRGDP = D3.max (UPDATEDATA[I].GDP, function (d) {return d[1];
});
if (Currgdp > Updategdpmax) updategdpmax = CURRGDP;
} Yscale = D3.scale.linear (). Domain ([0, Updategdpmax * 1.1]). Range ([Height-padding.top-padding.bottom, 0]);
YAxis = D3.svg.axis (). Scale (Yscale). Orient ("left");
Svg.selectall ("G.y.axis"). Call (YAxis); Svg.selectall ("path")//Select all <path>. Data (UpdateData)//binding data in <svg>. Transition (). Duration. Ease
("linear"). attr ("D", function (d) {return Linepath (D.GDP);//back to the path generated by the line Builder});
Return to New Updatelinechart (); }
The above is d3.js realize real-time refresh line chart all the content, hope to learn d3.js bring help to everyone.