javascriptjqueryd3.jsjquery-svg

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 :

enter image description here

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

Solution

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