如何在d3中的圆之间动态绘制和设置线动画？

Question

我有以下下拉菜单。

    <form action="" method="get" id="myForm">
     <div class="form-group">
        <label for="exampleFormControlSelect1">Select Type of Casting</label>
        <select class="form-control" id="castingSelection">
          <option value="Unicast">Unicast</option>
          <option value="Multicast">Multicast</option>
          <option value="BroadCast">Broadcast</option>
          <option value="Anycast">Anycast</option>
        </select>
      </div>

      <!-- simulate -->
      <input type="submit" value="Simulate" class="btn btn-danger">
    </form>

我希望用户选择他们要模拟的铸件类型，并根据他们选择的内容在圆之间绘制线条。到目前为止，我的d3代码是

<script>
var canvas = d3.select("body")
  .append("svg")
  .attr("width", 1200)
  .attr("height", 720)
  .attr("color", "black");

// create the main server
function createMainServer(xindex, yindex, radius){
    var circle = canvas.append("circle")
            .attr("fill", "purple")
            .attr("cx", xindex)
            .attr("cy", yindex)
            .attr("r", radius)
}
// create the destination server 
function createDots(xindex, yindex, radius){
    // create the circle
    var circle = canvas.append("circle")
        .attr("fill", "black")
        .attr("cx", xindex)
        .attr("cy", yindex)
        .attr("r", radius);  
}
createMainServer(150, 300, 25)
createDots(650, 200, 25)
createDots(650, 100, 25)
createDots(650, 400, 25)
createDots(650, 300, 25)
createDots(650, 500, 25)

我已经创建了点，我现在想要的是让用户选择类型的转换，如果是单播的，那么主服务器会画线到其他任何一个圆（计算机）。