block by NPashaP 63880bcdfd46d4e5fdda6149a9967a41

biPartite - barSize

Full Screen

viz.bP().barSize

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

index.html

<!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="//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>