A line graph _javascript class library based on D3.js to realize real-time refresh

Let's take a look at the effect chart.

Directly below the source code, HTML file

Linechart.js is responsible for loading and refreshing the line chart

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 data has just been refreshed, but the axis wood is refreshed.

Introduced

Svg.selectall ("G.y.axis")
  . Call (YAxis);

The above is d3.js realize real-time refresh line chart all the content, hope to learn d3.js bring help to everyone.