title: Transform mouse svg to polar plot coordinates using d3.js
body: <p>I <a href="http://jsfiddle.net/crbmba60/" rel="nofollow noreferrer">created</a> a polar plot using d3 similar <a href="http://bl.ocks.org/mbostock/4583749" rel="nofollow noreferrer">to this example</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/jvc6P.png" alt="Polar plot"></p>
  
  <p>How can I transform the svg coordinates to polar coordinates?</p>
  
  <pre class="lang-js prettyprint-override"><code>var svgPolar = d3.select("#polar")
      .append("svg")
      .on("mousemove", function(){$("#coords").text(d3.mouse(this));})
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  </code></pre>
  
  <p>I already have the x and y coordinates of the mouse movement on <a href="http://jsfiddle.net/crbmba60/" rel="nofollow noreferrer">jsfiddle</a>.
  Thanks.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I adjusted it to my needs. But it looks a little ugly to distinguish the azimuth angle.</p>
  
  <pre><code>.on("mousemove", function(){
      var coords = d3.mouse(this);
      var adjusted_x = coords[0] - ( width / 2 );
      var adjusted_y = coords[1] - ( height / 2 );
      var d = Math.sqrt( ( adjusted_x * adjusted_x ) + ( adjusted_y * adjusted_y ) );
      var degrees_elevation = (( 1 - d/radius ) * 90).toFixed(2)
      var angle_azimuth = Math.atan2( adjusted_y, adjusted_x );
      var degrees_azimuth = ( angle_azimuth + ( Math.PI/2 ) ) * ( 180 / ( Math.PI ) );
      var degrees_azimuth_fixed = (degrees_azimuth &gt; 0 ? degrees_azimuth : (degrees_azimuth+360)).toFixed(2);
      if(degrees_elevation &gt;= 0)
          $("#coords").text(degrees_azimuth_fixed + " " + degrees_elevation);
  })
  </code></pre>
  
  <p><a href="http://jsfiddle.net/crbmba60/2/" rel="nofollow noreferrer">http://jsfiddle.net/crbmba60/2/</a></p>