user3501613 - 5 months ago 3x
Javascript Question

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

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()
.startAngle(0);
var background = svg.append("path")
.datum({ endAngle: τ })
.style("fill", "#ddf")
.attr("d", arc);
``````

jsFiddle

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
``````

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 svg = d3.select("#idmainSVG")
.append("g")
.attr("transform", "translate("+firstTranslate[0] +","+firstTranslate[1] + ")");

var arc = d3.svg.arc()
.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>``````