Using D3.js to implement the simplest column diagram example code _javascript tips

First, put the effect map out:

With a histogram of the basic elements: column, axis, scale, value and so on.

It has to be said that D3.js is more troublesome than the echarts of direct use, but it is more free.

Let's see how it's going to happen.

Determine the size of the canvas var width = 400;
var height = 400;
Add an SVG canvas to the body-var svg = D3.select ("Body"). Append ("SVG"). attr ("width", width). attr ("height", height);
Define the blank space around the canvas var padding = {left:30, right:30, top:20, bottom:20};
Defines an array of var datasets = [10, 20, 30, 40, 30, 20, 10, 5];  X-axis scale var XScale = d3.scale.ordinal (). Domain (D3.range (dataset.length)). Rangeroundbands ([0, Width-padding.left-
Padding.right]); Y-axis scale var Yscale = d3.scale.linear (). Domain ([0, D3.max (DataSet)). Range ([Height-padding.top-padding.bottom, 0
]);
Define x-axis var xaxis = D3.svg.axis (). Scale (XScale). Orient ("bottom");
Defines the y-axis var yaxis = D3.svg.axis (). Scale (Yscale). Orient ("left");
White space between the rectangles var rectpadding = 4; Add Rectangle element var rects = Svg.selectall (". Myrect "). Data (DataSet). Enter (). Append (" Rect "). attr (" Class "," Myrect "). attr (" Fill "," Steelblue "). attr (" tr Ansform "," Translate ("+ Padding.left +", "+ Padding.top +") "). attr (" X ", function (d, i) {return xscalE (i) + RECTPADDING/2;
  }). attr ("y"), function (d) {return Yscale (d); }). attr ("width", Xscale.rangeband ()-rectpadding). attr ("Height", function (d) {return HEIGHT-PADDING.TOP-PA
  Dding.bottom-yscale (d);
}); Add literal element var texts = Svg.selectall (". MyText "). Data (DataSet). Enter (). Append (" text "). attr (" Class "," MyText "). attr (" Fill "," white "). attr (" Text-a  Nchor "," Middle "). attr (" transform "," translate "(" + Padding.left + "," + Padding.top + ")). attr (" X ", function (d, i)
  {return XScale (i) + RECTPADDING/2;
  }). attr ("y"), function (d) {return Yscale (d);
  }). attr ("DX", function () {return (Xscale.rangeband ()-rectpadding)/2;
  }). attr ("dy", function (d) {return 20;
  }). text (function (d) {return D;
}); Add x-Axis svg.append ("G"). attr ("Class", "axis"). attr ("transform", "translate (" + Padding.left + "," + (height-padding
. Bottom) + ")". Call (Xaxis); Add y-Axis svg.append ("G"). attr ("Class", "axis"). attr ("Transform "," translate ("+ Padding.left +", "+ Padding.top +") "). Call (YAxis); 

Summarize

Well, here's the example of using d3.js to achieve the simplest histogram, how about that? Easy, huh? I hope the content of this article to just learn d3.js friends can help, if there is doubt you can message exchange, thank you for the cloud Habitat Community support.