Radar Chart - Axis Addition/Removal

Basic Radar chart layout code can be found here : /nbremer/6506614

The purpose of this block is to explore the ability to update radar chart axes. This block is not complete, as removing an axis out of order (ie, not at 0 deg) throws off the animation. If anyone knows how to fix this bug, please let me know.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Axis Addition/Removal</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    
    <style type="text/css">

body {
        overflow: hidden;
        margin: 0;
        font-size: 14px;
        font-family: "proxima_nova_reg", sans-serif;
      }

body .add-skill {
        position: absolute;
        left: 100px;
        top: 50px;
        height: 20px;
        background-color: #a8a8a8;
        color: white;
        border-radius: 40px;
        padding: 8px 16px 7px 13px;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

#chart {
        position: absolute;
        left: 100px;
      }

.yaxis, .xaxis {
        font: 10px sans-serif;
        width: 100px;
      }

.yaxis path,
      .yaxis line,
      .yaxis tick {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }

.xaxis path,
      .xaxis line {
        fill: none;
        stroke: black;
        stroke-dasharray: 10,10;
        shape-rendering: crispEdges;
      }

</style>

</head>
  <body>

</body>
  <script type="text/javascript" src="data.js"></script>
  <script type="text/javascript" src="script.js"></script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js