选择弧上的区域

Question

我想通过点击弧线并拖动来做出选择。下面的例子显示了一个非常相似的概念，但是选择从一个随机的位置开始，而我想从深蓝色的弧上的位置开始，方法是单击鼠标并拖动。 http://jsfiddle.net/bno009s5/

var dataset = { 
 
    apples: [532, 284], 
 
}; 
 

 
var degree = Math.PI/180; 
 

 
var width = 460, 
 
    height = 300, 
 
    radius = Math.min(width, height)/2; 
 

 
var color = d3.scale.category20(); 
 

 
var pie = d3.layout.pie().startAngle(-90 * degree).endAngle(90 * degree) 
 
    .sort(null); 
 

 
var arc = d3.svg.arc() 
 
    .innerRadius(50) 
 
    .outerRadius(100); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
var path = svg.selectAll("path") 
 
    .data(pie(dataset.apples)) 
 
    .enter().append("path") 
 
    .attr("fill", function(d, i) { 
 
    return color(i); 
 
    }) 
 
    .attr("d", arc) 
 
    .each(function(d) { 
 
    this._current = d; 
 
    }); // store the initial values; 
 

 

 
window.setInterval(dummyData, 2000); 
 

 
// Store the displayed angles in _current. 
 
// Then, interpolate from _current to the new angles. 
 
// During the transition, _current is updated in-place by d3.interpolate. 
 
function arcTween(a) { 
 
    var i = d3.interpolate(this._current, a); 
 
    this._current = i(0); 
 
    return function(t) { 
 
    return arc(i(t)); 
 
    }; 
 
} 
 

 
function dummyData() { 
 
    var num = Math.floor(Math.random() * 100); 
 
    var key = Math.floor(Math.random() * dataset.apples.length); 
 

 
    dataset.apples[key] = num; 
 

 
    draw(); 
 
}; 
 

 
function draw() { 
 
    svg.selectAll("path") 
 
    .data(pie(dataset.apples)) 
 
    .transition() 
 
    .attrTween("d", arcTween); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.4/d3.min.js"></script>

Answer 1

这里有一个jsfiddle，用蓝线可见。您可以点击圆圈内外，也可以尝试点击两个端点下面的内容。

绿色圆圈仅用于美学（即：用最喜欢的宠物图片取代:-) 经过测试，可在IE9，最新的Chrome和FF（2014年10月）中使用。

编辑：增加了拖动功能。下面的代码是原来的小提琴。

var s = Snap(400,400); 
 
var circleX = 100, circleY = 100, circleRadius = 57; 
 
var stroke_width = 20; 
 
var blueCircle = s.circle(circleX, circleY, circleRadius); 
 
var hcp = Math.Pi*circleRadius; // half circle perimeter = 179.0 
 

 
//Arc Path 
 
var d='M 43,100 A 57,57 0 0 1 43,100'; 
 
var arcPath = s.path(d); 
 
arcPath.attr({ 
 
    fill: "none", 
 
    stroke: "red", 
 
    "stroke-width": stroke_width 
 
}); 
 

 
// Line Path 
 
var L1 = s.path("M "+circleX+" "+circleY +"L 0 0"); 
 
blueCircle.attr({ 
 
    fill: "none", 
 
    stroke: "skyblue", 
 
    "stroke-width": stroke_width, 
 
    "stroke-dasharray": "0,179,179" 
 
}); 
 
var c1 = s.circle(0,0,5).attr({ fill: "none",stroke: "green" }); 
 

 
function OnMouseDown(evt) { 
 
    var mouseY = Math.min(evt.clientY,100); // limit mouseY to 100 
 
    
 
    L1.attr({ d: "M "+circleX+" "+circleY +"L "+evt.clientX+" "+mouseY }); 
 
    var totalLength = L1.getTotalLength(); 
 
    if (totalLength < circleRadius) { // smaller, extend line 
 
     var ratio = circleRadius/totalLength; 
 
     var x_len = evt.clientX + (evt.clientX - circleX)*ratio; 
 
     var y_len = mouseY + (mouseY - circleY)*ratio; 
 
     L1.attr({ d: "M "+circleX+" "+circleY +"L "+x_len+" "+y_len }); 
 
    } 
 
    var PAL = L1.getPointAtLength(circleRadius); 
 
    c1.attr({ cx: PAL.x , cy: PAL.y }); 
 
    draw_arc(PAL.x,PAL.y); 
 
} 
 

 
function draw_arc(endX,endY) { // Draw SVG arc 
 
    // point starts on left at 43,100, 
 
    // Arc Box height is 57,57 (radius) 
 
    // Ends at (endX,endY) 
 
    
 
    var newArc ='M 43,100 A 57,57 0 0 1 '+endX+','+endY; 
 
    arcPath.attr({ 'd': newArc }); 
 
} 
 
document.onmousedown = OnMouseDown;

<script src='//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>