javascript - 在D3.js中获取圆弧的(x，y)坐标

我正在使用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

最佳答案

基本上可以算出该点，您已经知道了中心点，因此只需要取走左侧点半径的一半，然后取右侧点半径的一半即可。

例如 ：

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

关于javascript - 在D3.js中获取圆弧的(x，y)坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37346734/