Chord - labelPadding

viz.ch().labelPadding

labelPadding parameter adjusts how far the labels are from the border.

The diagram on the left uses the default 0.05 and the one on the right uses 0.1.

Part of a series of examples on Chord diagram using VizJS

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 10px sans-serif;
}

svg text{
  fill:black;
  text-anchor:middle;
  font-size:18px;
}
svg .values text{
  pointer-events:none;
  stroke-width: 0.5px;
}
.groups:hover{
  cursor:pointer;
  font-weight:bold;
}
</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 data = [
 ["US","Canada",343] ,["US","China",27]
,["US","India",3],["US","UK",212]
,["Canada","China",9],["Canada","India",2]
,["Canada","UK",86],["Canada","US",842]
,["UK","Canada",607],["UK","China",9]
,["UK","India",5],["UK","US",715]
,["China","Canada",711],["China","India",7]
,["China","UK",183],["China","US",2104]
,["India","Canada",621],["India","China",9]
,["India","UK",777],["India","US",1969]
];

var colors = {
   "US":"rgb(193,161,111)"
  ,"Canada":"rgb(115,146,17)"
  ,"UK":"rgb(234,193,36)"
  ,"China":"rgb(217,36,5)"
  ,"India":"rgb(53,99,235)"
};

var height=500, width=1050;
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

var chLeft = viz.ch()
      .data(data)
      .fill(function(d){ return colors[d];});

var chRight = viz.ch()
      .data(data)
      .fill(function(d){ return colors[d];})
	  .labelPadding(0.1);

//create g elements and create the chord diagrams in it
svg.append("g").attr("transform", "translate(300,250)").call(chLeft);
svg.append("g").attr("transform", "translate(750,250)").call(chRight);

// adjust the bl.ocks frame dimension.
d3.select(self.frameElement).style("height", height+"px").style("width", width+"px");
</script>

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