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

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>

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