| license: gpl-3.0 |
This method is used to set the orientation of the graph. The value can be "vertical" or "horizontal".
The graph on the left is using the default orientation which is vertical and the right graph is using the horizontal orientation.
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] | |
| ]; | |
| function fill(d){ | |
| var color = {A:"#3366CC", B:"#DC3912", C:"#FF9900"}; | |
| return color[d.primary]; | |
| } | |
| var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); | |
| var bp1=viz.bP().data(data).fill(fill); | |
| svg.append("g").attr("transform","translate(50,50)").call(bp1); | |
| var bp2=viz.bP().data(data).fill(fill).orient("horizontal"); | |
| 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> |