| license: gpl-3.0 |
This method is used to set the size of the bar which is width (height) of the bars in the parts for vertical (horizontal) orientation.
The example on the left has the default barSize=35 and the exmple on the right has barSize=10.
For other options and examples, check VizJS
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .mainBars{ | |
| shape-rendering: auto; | |
| fill-opacity: 0; | |
| stroke-width: 0.5px; | |
| stroke: rgb(0, 0, 0); | |
| stroke-opacity: 0; | |
| } | |
| .subBars{ | |
| shape-rendering:crispEdges; | |
| } | |
| .edges{ | |
| stroke:none; | |
| fill-opacity:0.3; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="http://vizjs.org/viz.v1.1.0.min.js"></script> | |
| <script> | |
| var width = 960, height=700; | |
| var data=[ | |
| ['A','X', 1, 5] | |
| ,['A','Y', 3,4] | |
| ,['B','X', 5,1] | |
| ,['B','Y', 8,10] | |
| ,['C','X', 2,13] | |
| ,['C','Y', 9,7] | |
| ]; | |
| var color = {A:"#3366CC", B:"#DC3912", C:"#FF9900"}; | |
| var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); | |
| var bp1=viz.bP().data(data).fill(d=>color[d.primary]); | |
| svg.append("g").attr("transform","translate(50,50)").call(bp1); | |
| var bp2=viz.bP().data(data) | |
| .fill(d=>color[d.primary]) | |
| .barSize(10); | |
| svg.append("g").attr("transform","translate(500,50)").call(bp2); | |
| // adjust the bl.ocks frame dimension. | |
| d3.select(self.frameElement).style("height", height+"px").style("width", width+"px"); | |
| </script> | |
| </body> | |
| </html> |