NPashaP/.block

## .block
license: gpl-3.0

## readme.md

      
    Raw
  

              readme.md
            
          
    viz.bP().min

This method is used to set the min height (width) in pixels for each group in the parts for vertical (horizontal) orientation.
The example on the left is using the default min which is 0 and the example on the right has min 200 pixels. As a result the blue
and orange bars have white space added so that it occupis 200 pixels.
The min parameter is useful to stop labels from overlapping when their values are too small by ensuring that there is a min size for each group.
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="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])
		   .min(200);

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>
	<!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])
	.min(200);

	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>