D3 Examples - radial line v4

xxxxxxxxxx
 
​
<!DOCTYPE html>
​
<html>
​
<head>
    <meta charset="UTF-8">
    <title>Chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #E1E5EC;
        }
​
        #myGraph {
            width: 500px;
            height: auto;
            margin: auto;
        }
​
    </style>
</head>
​
<body translate="no">
​
    <div class="container centered">
        <div id="myGraph"></div>
    </div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="d3script.js"></script>
​
    <script>
    
    var width = document.getElementById('myGraph').getBoundingClientRect().width;
    var height = width;
    var center = {
        x: width / 2,
        y: height / 2
    };
​
    var pointsOuter = getPoints(24, 220);
    var pointsInner = getPoints(12, 100);
    var links = [
        {s: 0, t: 8},
        {s: 0, t: 2},
        {s: 1, t: 4},
        {s: 18, t: 9},
        {s: 12, t: 5},
        {s: 22, t: 10},
        {s: 21, t: 10},
        {s: 9, t: 4},
        {s: 19, t: 5},
        {s: 4, t: 3},
        {s: 16, t: 8},
        {s: 16, t: 1},
        {s: 14, t: 7},
        {s: 14, t: 6},
    ];
​
    var dataset = {
        outerPoints: pointsOuter,
        innerPoints: pointsInner,
        links: links
    };
​
    var chart = renderChart()
        .svgHeight(height)
        .svgWidth(width)
        .container('#myGraph')
        .data(dataset)
        .debug(true)
        .run()
​
    function getPoints(n, r){
        var coords = [];
        var radian = (2 * Math.PI) / n;
        for(var i = 0; i < n; i++){
          var angle = i * radian;
          var x = center.x + r * Math.cos(angle);
          var y = center.y + r * Math.sin(angle);
          coords.push({
            x: x,
            y: y
          });
        }
        return coords;
    }
​
    </script>
​
​
</body>
​
</html>
​
    