title: add circle in a spiral chart with d3js with line connecting to center
body: <p><img src="https://i.stack.imgur.com/eB9ul.png" alt="enter image description here">hi I created a spiral chart in d3.js, and I want to add circle to different position of the spiral lines.according to there values.
  circle closes to the center will have highest priority.
   any idea how to do that.</p>
  
  <p>here is the code which i wrote</p>
  
  <pre><code>var width = 400,
  height = 430
  num_axes = 8,
  tick_axis = 1,
  start = 0
  end = 4;
  
  var theta = function(r) {
    return -2*Math.PI*r;
  };
  
  var arc = d3.svg.arc()
    .startAngle(0)
    .endAngle(2*Math.PI);
  
  var radius = d3.scale.linear()
    .domain([start, end])
    .range([0, d3.min([width,height])/2-20]);
  
  var angle = d3.scale.linear()
    .domain([0,num_axes])
    .range([0,360])
  
  var svg = d3.select("#chart").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width/2 + "," + (height/2+8) +")");
  
  var pieces = d3.range(start, end+0.001, (end-start)/1000);
  
  var spiral = d3.svg.line.radial()
    .interpolate("cardinal")
    .angle(theta)
    .radius(radius);
  
  //svg.append("text")
  //  .text("And there was much rejoicing!")
  //  .attr("class", "title")
  //  .attr("x", 0)
  //  .attr("y", -height/2+16)
  //  .attr("text-anchor", "middle")
  
  //svg.selectAll("circle.tick")
  //    .data(d3.range(end,start,(start-end)/4))
  //  .enter().append("circle")
  //    .attr("class", "tick")
  //    .attr("cx", 0)
  //    .attr("cy", 0)
  //    .attr("r", function(d) { return radius(d); })
  
  svg.selectAll(".axis")
      .data(d3.range(num_axes))
    .enter().append("g")
      .attr("class", "axis")
      .attr("transform", function(d) { return "rotate(" + -angle(d) + ")"; })
    .call(radial_tick)
    .append("text")
      .attr("y", radius(end)+13)
      .text(function(d) { return angle(d) + "°"; })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) { return "rotate(" + -90 + ")" })
  
  svg.selectAll(".spiral")
      .data([pieces])
    .enter().append("path")
      .attr("class", "spiral")
      .attr("d", spiral)
      .attr("transform", function(d) { return "rotate(" + 90 + ")" });
  
  function radial_tick(selection) {
    selection.each(function(axis_num) {
      d3.svg.axis()
        .scale(radius)
        .ticks(5)
        .tickValues( axis_num == tick_axis ? null : [])
        .orient("bottom")(d3.select(this))
  
      d3.select(this)
        .selectAll("text")
        .attr("text-anchor", "bottom")
        .attr("transform", "rotate(" + angle(axis_num) + ")")
    });
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/XvghL.png" alt="enter image description here">
  please see the second solution for my implementation. Help me with connecting the circle with the center </p>