Getting the (x,y) coordinates of an arc in D3.js

Question

I am developing one application using D3.js. In the middle of one chart, I need to implement an arc and line like this :

Here I want to find the end coordinates of the arc to draw the lines.

I tried lot of codes from here but i didn't got any solution.Whether D3 provides any method to find the (x,y) coordinates of particular position in an arc.

My code is given bellow

 var svg = d3.select("#idSection6Sub").append("svg")
    .attr("id", "svgClassGaugeNish")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("g")
    .attr("transform", "translate(" + divWidth / 2 + "," + divHeight / 2 + ")")
var arc = d3.svg.arc()
    .innerRadius(inradius)
    .outerRadius(outRadius)
    .startAngle(0);
var background = svg.append("path")
    .datum({ endAngle: τ })
    .style("fill", "#ddf")
    .attr("d", arc);

jsFiddle

Answer 1

You can create a reference arc where the startAngle and endAngle are the same. The centroid of this lengthless arc will return the the coordinates for whatever angel you specify.

This is useful for getting the start and end points of any arc you are drawing. This allows the library to do the trigonometry for you.

var toRadians = function (deg){
    return deg * (Math.PI / 180);
};

var arcStart = d3.svg.arc()
    .startAngle(toRadians(-20))
    .endAngle(toRadians(-20))
    .innerRadius(100)
    .outerRadius(100)
    .centroid();

Answer 2

 var τ = 2 * Math.PI;
var firstPoint = [xcenter + (Innerradius * Math.sin((τ * angle) / 100)), ((ycenter  + Innerradius * -Math.cos((τ * angle) / 100)))];
var secondPoint = [xcenter + ((Outerradius + 15) * Math.sin((τ * angle) / 100)), ((ycenter  + (Outerradius + 15) * -Math.cos((τ * angle) / 100)))]; 

here angle is the corresponding angle in which we need to find the point,here I am taking the end angle.If we draw one line with this point the output will be

Answer 3

Basically to work out the point, you already know the center point so just take away half the radius for the left point and add half the radius for the right.

For example :

//declare values 
var firstTranslate = [100,120] //added this to show you how it works
var radius = 50; //use inner radius here 

Use these to work out other points :

var currentPoint = firstTranslate;

var leftPoint =[currentPoint[0] - radius, currentPoint[1]]//only need to edit x value as y will stay the same
var rightPoint =[currentPoint[0] + radius, currentPoint[1]]//only need to edit x value as y will stay the same

So I plot these like so :

svg.append('line')
.attr('x1', leftPoint[0]-100)
.attr('y1', leftPoint[1])
.attr('x2', leftPoint[0])
.attr('y2', leftPoint[1])
.attr('stroke','red')
.attr('stroke-width','15')
.attr("transform", "translate("+(-firstTranslate[0]) +","+(-firstTranslate[1] )+ ")"); //amke up for original translate

svg.append('line')
.attr('x1', rightPoint[0]+50)
.attr('y1', rightPoint[1])
.attr('x2', rightPoint[0])
.attr('y2', rightPoint[1])
.attr('stroke','red')
.attr('stroke-width','15')
.attr("transform", "translate("+(-firstTranslate[0]) +","+(-firstTranslate[1] )+ ")"); //amke up for original translate

Notice the translate, this is to make up for the original translate you did at the start.

Updated fiddle: http://jsfiddle.net/thatOneGuy/1u8Lb38c/2/

var firstTranslate = [100,120] //added this to show you how it works
var radius = 50;

var svg = d3.select("#idmainSVG")
    .append("g")
    .attr("transform", "translate("+firstTranslate[0] +","+firstTranslate[1] + ")");
 
var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(1.5*Math.PI)
    .endAngle((2.5*Math.PI));
     
svg.append("path")
    .attr("class", "arc")
    .style("fill", "red")
    .attr("d", arc);
    
//basically to work out the pointm you already know the center point so just take away half the radius for the left point and add half the radius for the right
    
var currentPoint = firstTranslate;

var leftPoint =[currentPoint[0] - radius, currentPoint[1]]//only need to edit x value as y will stay the same
var rightPoint =[currentPoint[0] + radius, currentPoint[1]]//only need to edit x value as y will stay the same
console.log(leftPoint)
console.log(rightPoint)
//create lines to show you

svg.append('line')
.attr('x1', leftPoint[0]-100)
.attr('y1', leftPoint[1])
.attr('x2', leftPoint[0])
.attr('y2', leftPoint[1])
.attr('stroke','red')
.attr('stroke-width','15')
.attr("transform", "translate("+(-firstTranslate[0]) +","+(-firstTranslate[1] )+ ")"); //amke up for original translate

svg.append('line')
.attr('x1', rightPoint[0]+50)
.attr('y1', rightPoint[1])
.attr('x2', rightPoint[0])
.attr('y2', rightPoint[1])
.attr('stroke','red')
.attr('stroke-width','15')
.attr("transform", "translate("+(-firstTranslate[0]) +","+(-firstTranslate[1] )+ ")"); //amke up for original translate
    
 

body,html,form{
  height:100%;
  width:100%;
  }

.maincls{
  width:96%;
  height:80%;
  float:left;
  border:1px solid black;
  background-color:white;
}
.child1{
  height:41%;
  width:50%;
  float:left;
   
  }
  .clsEmpty{
    height:100%;
    width:20%;
    float:left;
    }
  .clsBody{
    height:100%;
    width:79%;
    float:left;
  }
.emptySVG{
    height:20%;
    width:100%;
    float:left;
}
.mainSVG{
    height:80%;
    width:100%;
    float:left;
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div class="maincls">

<div class="child1">

<div class="clsEmpty">

</div>

<div class="clsBody">

<svg class="emptySVG">

</svg>

<svg class="mainSVG"  id="idmainSVG">

  

</svg>

</div>   

</div>

</div>