| license: gpl-3.0 |
These methods are used to set the sorting function for the primary and secondary parts.
The example on the left is using the default sorting functions for primary and secondary parts which is d3.ascending.
The example on the right is using custom sort function for primary and secondary parts.
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 bca=["B","C","A"]; | |
| function sortBCA(a,b){ return d3.ascending(bca.indexOf(a),bca.indexOf(b)); } | |
| var yx=["Y","X"]; | |
| function sortYX(a,b){ return d3.ascending(yx.indexOf(a),yx.indexOf(b)); } | |
| 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]) | |
| .sortPrimary(sortBCA) | |
| .sortSecondary(sortYX); | |
| 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> |