javascript - 获取arc svg上点击位置的 Angular

Question

假设我有 svg，画成这样:

var myArc = d3.svg.arc()
    .innerRadius(width / 5)
    .outerRadius(width / 2);

myArc.startAngle(function(d, i) {
    return radians * i
});

myArc.endAngle(function(d, i) {
    return radians * (i + 1)

...然后填充一些颜色等。它看起来像这样:

现在，我想在 svg 上单击以获取 Angular 。示例:当我点击红色时，我希望在 310° 和 50° 之间，当我点击黄色等时，我希望在 70° 左右。

我该怎么做？提前致谢。

Answer 1

我做了一些研究，没有找到任何更简单的解决方案。我正在使用你提到的方式:获取圆心和点击位置，然后根据这两个计算 Angular 。我不认为这使用起来太复杂。

注:由于圆不是真正的圆，所以存在一些数值误差。

希望这是有用的。

(function($){
  var center = {};
  
  var calculateAngle = function(x, y){
    var k = Math.abs(y) / Math.abs(x);
    var angle = Math.atan(k) * 180 / Math.PI;
    if(y * x > 0){
    	angle = 90 - angle + (y < 0 ? 180 : 0);
    } else {
      angle = angle + (y < 0 ? 90 : 270);
    }
    
    return angle;
  }
  
  $(document).ready(function(){
    var $container = $('#container');
    var $selector = $('#selector');
    var $result = $('#result');
    
    center = {
      x: $container.width() / 2,
      y: $container.height() / 2
    }    
    $selector.css({left:center.x, top:center.y});
    
    $container.on('click', function(e){
    	var x = e.offsetX;
      var y = e.offsetY;
      $selector.css({left:x, top:y});
      var angle = calculateAngle(x - center.x, center.y - y);
      
      $result.text(angle);
    });
  });
})(jQuery)

#container{
  display: inline-block;
  border: 1px solid red;
  width: auto;
  position: relative;
  
}

#selector{
  position: absolute;
  border:1px solid black;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <span id="selector"></span>
  <img src="http://i.stack.imgur.com/4X8A7.png">
</div>
<div>
  <span>Result: </span>
  <span id="result"></span>
</div>