| license: gpl-3.0 |
The fill method is used to set the fill color function for the bars and edges. The function will be passed an object of the type {primary:...,secondary:...} and should return a color.
The example on the left is using the primary attribute to color whereas the example on the right is using the secondary attribute to color.
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 fill1(d){ | |
| var color = {A:"#3366CC", B:"#DC3912", C:"#FF9900"}; | |
| return color[d.primary]; | |
| } | |
| function fill2(d){ | |
| var color = {X:"#3366CC", Y:"#DC3912"}; | |
| return color[d.secondary]; | |
| } | |
| var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); | |
| var bp1=viz.bP().data(data).fill(fill1); | |
| svg.append("g").attr("transform","translate(50,50)").call(bp1); | |
| var bp2=viz.bP().data(data).fill(fill2); | |
| 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> |