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

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

这里我想找到圆弧的端点坐标来画线

我在这里尝试了很多代码，但没有找到任何解决方案。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);

---

基本上要计算出点，你已经知道中心点，所以只需去掉左点的一半半径，再加上右点的一半半径

例如：

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

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

更新小提琴：

var firstTranslate=[100120]//添加此代码是为了向您展示它的工作原理
var半径=50；
var svg=d3。选择（“idmainSVG”）
.附加（“g”）
.attr（“transform”、“translate”（+firstTranslate[0]+”，“+firstTranslate[1]+”））；
var arc=d3.svg.arc（）
.内半径（50）
.外层（70）
.startAngle（1.5*Math.PI）
.端角（（2.5*Math.PI））；
追加（“路径”）
.attr（“类”、“弧”）
.样式（“填充”、“红色”）
.attr（“d”，弧）；
//基本上要算出点M，你已经知道中心点了，所以只需去掉左点的一半半径，再加上右点的一半半径
var currentPoint=firstTranslate；
var leftPoint=[currentPoint[0]-半径，currentPoint[1]//只需编辑x值，因为y将保持不变
var rightPoint=[currentPoint[0]+半径，currentPoint[1]//只需编辑x值，因为y将保持不变
console.log（leftPoint）
console.log（右点）
//创建线条以显示您
append（'行'）
.attr（'x1'，左点[0]-100）
.attr（'y1'，leftPoint[1]）
.attr（'x2'，左点[0]）
.attr（'y2'，左点[1]）
.attr（'stroke'，'red'）
.attr（'笔划宽度'，'15'）
.attr（“transform”、“translate”（+（-firstTranslate[0]）+），“+（-firstTranslate[1]）+”）//为原文翻译做好准备
append（'行'）
.attr（'x1'，右点[0]+50）
.attr（'y1'，右点[1]）
.attr（'x2'，右点[0]）
.attr（'y2'，右点[1]）
.attr（'stroke'，'red'）
.attr（'笔划宽度'，'15'）
.attr（“transform”、“translate”（+（-firstTranslate[0]）+），“+（-firstTranslate[1]）+”）//为原文翻译做好准备

正文、html、表单{
身高：100%；
宽度：100%；
}
.maincls{
宽度：96%；
身高：80%；
浮动：左；
边框：1px纯黑；
背景色：白色；
}
.儿童1{
身高：41%；
宽度：50%；
浮动：左；
}
clsEmpty先生{
身高：100%；
宽度：20%；
浮动：左；
}
克莱斯博迪先生{
身高：100%；
宽度：79%；
浮动：左；
}
.emptySVG{
身高：20%；
宽度：100%；
浮动：左；
}
.mainSVG{
身高：80%；
宽度：100%；
浮动：左；
}

这里的角度是我们需要找到点的相应角度，这里我取端点的角度。如果我们用这个点画一条线，输出将是

---

您可以在起始角和结束角相同的位置创建参考弧。此无长度圆弧的质心将返回指定角度的坐标

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

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

---

你能用小提琴演奏吗？@那个家伙：我编辑了这个问题，请在答案中核对一下。。。。这是一个非常懒惰的说法。我已经给了你代码，它很容易实现…通过这个，我们可以找到弧的起点和终点，如果有任何方法可以找到该弧中的特定点。：感谢你的支持，我得到了使用三角法查找弧中任何坐标的代码。我正在添加代码bellow你能提供吗jsfiddle@AravindCheekkallur:

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