The drawing of d3.js--histogram and the combination of the past knowledge points

Randomly generated data var rand = D3.random.normal (0,25) var dataset = [];for (var i = 0;i <100;i++) {    Dataset.push (rand ());}

A histogram data conversion function:

Data conversion var bin_num = 15var Histogram=d3.layout.histogram ()    . Range ([ -50,50])//Interval range    . Bins (Bin_num)///number of separators    . Frequency (True)//true: number of statistics; false: Statistical probability var data = histogram (dataset); Console.log (data)

Second, start drawing:

var svg = d3.select ("Body"). Append ("SVG").    attr ("width", +)    . attr ("height", +) var color = D3.scale.category20 ();

1. Define Scale Bar

var max_height =    Rect_step = 30,//histogram pitch    heights = [];for (var i = 0;i<data.length;i++) {    Heights.push ( DATA[I].Y)}var scale_y = D3.scale.linear ()    . Domain ([d3.min (Heights), D3.max (Heights)])    . Range ([0,max_ Height])

2. Drawing graphics

var graphics = svg.append ("G")    . attr ("transform", "Translate (30,20)");

(1) Draw the rectangle and add the animation effect

graphics.select    All ("rect"). Data. Enter (). Append ("Rect"). attr ("Y", function (d,i) {return 300})//Y value of animation start    . attr ("height", 0)//animation start height. attr ("Fill", "red")//animation start color. Transition ()//Implement dynamic effect function. Duration (3000)//Specifies the duration of the entire transition, in milliseconds    . Ease ("bounce")//Specify the mode of transformation, linear: normal linear change; Circle: Slowly reaching the final state of the transformation, elastic with a bounce to the final state, and bounce bouncing several times in the final state.    . Delay (function (d,i) {return 200*i; })//Specify the time of the delay, indicating a certain amount of time before the transition starts, the unit is also milliseconds. attr ("X", function (d,i) {return i*rect_step}). attr ("Y", function (d,i) {return max_ Height-scale_y (D.Y)}). attr ("width", function (d,i) {return rect_step-2}). attr ("Height", function (d) {retur n scale_y (D.Y)}). attr ("Fill", color) 

<pre name= "Code" class= "JavaScript" >//add mouse event var rect = Graphics.selectall ("rect")    . On ("MouseOver", function (d,i) {        d3.select (this)            . attr ("Fill", "Yellow")    })    . On ("Mouseout", function (d,i) {        D3.select (This)            . attr ("Fill", Color)    })

(2) drawing an axis with arrows

Draw the arrow var defs = svg.append ("defs") var Arrowmarker = defs.append ("marker"). attr ("id", "arrow"). attr ("Markerunits", "    Strokewidth "). attr (" Markerwidth "). attr (" Markerheight "," attr "," 0 0 "). ViewBox (" attr ", 6) . attr ("Refy", 6). attr ("Orient", "Auto") var Arrow_path = "m2,2 l10,6 l2,10 l6,6 l2,2"; Arrowmarker.append ("path"). att R ("D", Arrow_path). attr ("Fill", "#000")//Draw the horizontal, vertical axis and add the arrow graphics.append ("line"). attr ("Stroke", "Black"). attr ("Stroke    -width "," 1px "). attr (" x1 ", 0). attr (" Y1 ", Max_height). attr (" X2 ", Data.length*rect_step). attr (" y2 ", max_height) . attr ("Marker-end", "url (#arrow)") Graphics.append ("line"). attr ("Stroke", "Black"). attr ("Stroke-width", "1px"). A TTR ("x1", 0). attr ("Y1", Max_height). attr ("X2", 0). attr ("y2", "url (#arrow)")///Draw axis separator line g Raphics.selectall (". Linetick"). Data. Enter (). Append ("line"). attr ("Stroke", "Black"). attr ("x1", func tion (d,i) {return i*rect_STEP+RECT_STEP/2}). attr ("Y1", Max_height). attr ("X2", Function (d,i) {return I*RECT_STEP+RECT_STEP/2}). attr ("y2", max_height+5)

(3) Add text

Graphics.selectall ("text").    data    . Enter ().    Append ("text").    attr ("Font-size", "10px")    . attr ("X", function (d,i) {        return i * RECT_STEP;    })    . attr ("Y", function (d,i) {        return max_height;    })    . attr ("DX", RECT_STEP/2-8)    . attr ("dy", "15px")    . Text (function (d) {        return Math.floor (d.x);    });

The effect is as follows:

The drawing of d3.js--histogram and the combination of the past knowledge points