获取D3.js中弧的（x，y）坐标

Question

我正在使用D3.js开发一个应用程序。在一个图表的中间，我需要实现这样的弧线：

这里我想找到弧线的结束坐标来绘制线条。

我从这里尝试了很多代码，但我没有得到任何解决方案。是否D3提供了任何方法来查找弧中特定位置的（x，y）坐标。

我的代码如下所示

 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

基本上要计算出点，你已经知道了中心点，所以只需要拿走左边半径的一半，然后为右边加半径。

例如：

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

使用这些来解决其他问题：

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

所以我这样绘制这些：

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

注意翻译，这是为了弥补你在开始时所做的原始翻译。

更新了小提琴：http://jsfiddle.net/thatOneGuy/1u8Lb38c/2/

＆＃13;

＆＃13;

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
    
 

＆＃13;

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;
}
 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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)))]; 

这里角度是我们需要找到点的相应角度，这里我采取结束角度。如果我们用这一点绘制一条线，输出将是

Answer 3

您可以创建一个startAngle和endAngle相同的参考弧。这个无长弧的质心将返回你指定的任何天使的坐标。

这对于获取正在绘制的任何弧的起点和终点非常有用。这允许库为您进行三角测量。

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();