D3 Curved Links

by amitrdx

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>

CSS

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: #bbb;
}

JavaScript

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");
var nodes = [{
  "id": "Myriel",
  "group": 1
}, {
  "id": "Napoleon",
  "group": 1
}, {
  "id": "Mlle.Baptistine",
  "group": 1
}, {
  "id": "Mme.Magloire",
  "group": 1
}, {
  "id": "CountessdeLo",
  "group": 1
}, {
  "id": "Geborand",
  "group": 1
}, {
  "id": "Champtercier",
  "group": 1
}, {
  "id": "Cravatte",
  "group": 1
}, {
  "id": "Count",
  "group": 1
}, {
  "id": "OldMan",
  "group": 1
}, {
  "id": "Labarre",
  "group": 2
}, {
  "id": "Valjean",
  "group": 2
}, {
  "id": "Marguerite",
  "group": 3
}, {
  "id": "Mme.deR",
  "group": 2
}, {
  "id": "Isabeau",
  "group": 2
}, {
  "id": "Gervais",
  "group": 2
}, {
  "id": "Tholomyes",
  "group": 3
}, {
  "id": "Listolier",
  "group": 3
}, {
  "id": "Fameuil",
  "group": 3
}, {
  "id": "Blacheville",
  "group": 3
}, {
  "id": "Favourite",
  "group": 3
}, {
  "id": "Dahlia",
  "group": 3
}, {
  "id": "Zephine",
  "group": 3
}, {
  "id": "Fantine",
  "group": 3
}, {
  "id": "Mme.Thenardier",
  "group": 4
}, {
  "id": "Thenardier",
  "group": 4
}, {
  "id": "Cosette",
  "group": 5
}, {
  "id": "Javert",
  "group": 4
}, {
  "id": "Fauchelevent",
  "group": 0
}, {
  "id": "Bamatabois",
  "group": 2
}, {
  "id": "Perpetue",
  "group": 3
}, {
  "id": "Simplice",
  "group": 2
}, {
  "id": "Scaufflaire",
  "group": 2
}, {
  "id": "Woman1",
  "group": 2
}, {
  "id": "Judge",
  "group": 2
}, {
  "id": "Champmathieu",
  "group": 2
}, {
  "id": "Brevet",
  "group": 2
}, {
  "id": "Chenildieu",
  "group": 2
}, {
  "id": "Cochepaille",
  "group": 2
}, {
  "id": "Pontmercy",
  "group": 4
}, {
  "id": "Boulatruelle",
  "group": 6
}, {
  "id": "Eponine",
  "group": 4
}, {
  "id": "Anzelma",
  "group": 4
}, {
  "id": "Woman2",
  "group": 5
}, {
  "id": "MotherInnocent",
  "group": 0
}, {
  "id": "Gribier",
  "group": 0
}, {
  "id": "Jondrette",
  "group": 7
}, {
  "id": "Mme.Burgon",
  "group": 7
}, {
  "id": "Gavroche",
  "group":...