biPartite - duration

viz.bP().duration

This method sets the duration for the transition when hovering mouse over the parts.

The example on the left has the default duration 500 and the example on right has duration 100.

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="https://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])
		   .duration(100);

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>

Modified http://vizjs.org/viz.v1.1.0.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://vizjs.org/viz.v1.1.0.min.js