获取 D3.js 中圆弧的 (x,y) 坐标

Question

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

这里想求圆弧的终点坐标来画线。

我从这里尝试了很多代码，但我没有得到任何代码solution.Whether 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

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

已更新 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>

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

这里的角度是我们需要找到点的对应角度，这里我取终点angle.If我们用这个点画一条线输出将是

Answer 3

您可以创建一个参考弧，其中 startAngle 和 endAngle 相同。这个无长弧的质心将 return 是您指定的任何天使的坐标。

这对于获取您正在绘制的任何圆弧的起点和终点很有用。这允许图书馆为您做三角函数。

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

获取 D3.js 中圆弧的 (x,y) 坐标

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

javascript

jquery

d3.js

jquery-svg