D3.js More Free bar chart

One, add a rectangle

//Width and HeightvarW = 500;varH = 100;varDataSet = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//Creating SVG elementsvarSVG = D3.select ("Body"). Append ("SVG"). attr ("Width", W). attr ("Height", h); Svg.selectall ("Rect"). Data (DataSet). Enter (). Append ("Rect"). attr ("X", 0). attr ("Y", 0). attr ("Width", 20). attr ("Height", 100);

Second, add more than one rectangle

//Width and HeightvarW = 500;varH = 100;varDataSet = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//Creating SVG elementsvarSVG = D3.select ("Body"). Append ("SVG"). attr ("Width", W). attr ("Height", h); Svg.selectall ("Rect"). Data (DataSet). Enter (). Append ("Rect"). attr ("X",function(d, i) {returnI * 21;//Bar width of 1 for padding}). attr ("Y", 0). attr ("Width", 20). attr ("Height", 100);

Three, uniform add Bar-the width of the fixed bar

In addition to the way (I * (w/dataset.length);) as the total width of the bar and Gap, when the fixed width of the set is less than the total width, it will naturally generate a blank gap

Bottom Line: The width of the bar is fixed, the total width-Strip width = blank width. Blank width depends on total width, total width depends on calculation expression (w/dataset.length)

//Width and HeightvarW = 500;varH = 100;varbarpadding = 1;varDataSet = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//Creating SVG elementsvarSVG = D3.select ("Body"). Append ("SVG"). attr ("Width", W). attr ("Height", h); Svg.selectall ("Rect"). Data (DataSet). Enter (). Append ("Rect"). attr ("X",function(d, i) {returnI * (w/dataset.length); }). attr ("Y", 0). attr ("Width", 20). attr ("Height", 100);

Four, uniform addition bar-fixed clearance width

Bottom line: The width of the gap is fixed, the total width-blank width = width. Bar width depends on total width (w/dataset.length-barpadding), total width depends on calculation expression (w/dataset.length)

//Width and HeightvarW = 500;varH = 100;varbarpadding = 1;varDataSet = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//Create SVG ElementvarSVG = D3.select ("Body"). Append ("SVG"). attr ("Width", W). attr ("Height", h); Svg.selectall ("Rect"). Data (DataSet). Enter (). Append ("Rect"). attr ("X",function(d, i) {returnI * (w/dataset.length); }). attr ("Y", 0). attr ("width", w/dataset.length-barpadding). attr ("Height", 100);

D3.js More Free bar chart