我如何圍繞一個固定的圓圈拖動圈 - d3.js

與this fiddle參考我已經改變了代碼this one.但我需要一些幫助，使小圓圈即可拖動並重新定位到其初始位置d3.layout.force我如何圍繞一個固定的圓圈拖動圈 - d3.js

<svg width=500 height=500></svg> 

var circleOX = originX + ((60) * Math.sin(0)); 
var circleOY = originY - ((60) * Math.cos(0)); 

var circle1 = svg.append("circle").attr({ 
    cx: circleOX - 10, 
    cy: circleOY - 10, 
    r: 10, 
    opacity: 0, 
    fill: "none", 
    stroke: "blue" 
});` 

`var circle2 = svg.append("circle").attr({ 
    cx: circleOX - 10, 
    cy: circleOY - 10, 
    r: 20, 
    opacity: 0, 
    fill: "none", 
    stroke: "blue" 
}); 


circle1.transition().delay(1500).duration(500).style("opacity", 1); 
circle2.transition().delay(1500).duration(500).style("opacity", 1); 


var tween1 = function (d, i, a) { 
    return d3.interpolateString("rotate(0, 200, 200)", "rotate(45, 200, 200)"); 
} 
var tween2 = function (d, i, a) { 
    return d3.interpolateString("rotate(0, 200, 200)", "rotate(10, 200, 200)"); 
} 


circle1.transition().delay(2000).duration(500).attrTween("transform", tween1); 
circle2.transition().delay(2000).duration(500).attrTween("transform", tween2);

在此先感謝

來源

2016-12-14 Venkat Bharath

嘗試了您的代碼，但圈子非常小。拖動他們似乎是可能的，但我會添加一個重置按鈕，使他們回到初始位置。順便說一句，你的代碼充滿了錯誤。確保你閱讀了API參考：https：//github.com/d3/d3/blob/master/API.md – Vlad

非常感謝你[Vlad]（http://stackoverflow.com/users/885838/vlad）。我是d3的初學者，想完成我的任務。再次感謝你幫助你的代碼，我會嘗試這些代碼。 –

沒有答案，但會幫助您開始：

`/** 
* @see http://stackoverflow.com/questions/41136300/how-do-i-make-draggable-circles-around-a-fixed-circle-d3-js 
* @param {Object} d3 
*/ 
window.DraggableCircles = window.DraggableCircles || (function(d3) { 
    'use strict'; 

    var svg = d3.select('svg'), 
     originX = 200, 
     originY = 200, 
     circleOX = originX + (60 * Math.sin(0)), 
     circleOY = originY - (60 * Math.cos(0)), 

     tween1 = function (d, i, a) { 
      return d3.interpolateString("rotate(0, 200, 200)", "rotate(45, 200, 200)"); 
     }, 

     tween2 = function (d, i, a) { 
      return d3.interpolateString("rotate(0, 200, 200)", "rotate(10, 200, 200)"); 
     }, 

     t1 = d3.transition().delay(1500).duration(500), 
     t2 = d3.transition().delay(2000).duration(500); 

    return { 
     run: function() { 
      svg.append("circle") 
       .attr("cx", circleOX - 10) 
       .attr("cy", circleOY - 10) 
       .attr("r", 10) 
       .attr("opacity", 1) 
       .attr("fill", "none") 
       .attr("stroke", "blue") 
       .transition(t1) 
       .attrTween("transform", tween1); 

      svg.append("circle") 
       .attr("cx", circleOX - 10) 
       .attr("cy", circleOY - 10) 
       .attr("r", 20) 
       .attr("opacity", 1) 
       .attr("fill", "none") 
       .attr("stroke", "blue") 
       .transition(t2) 
       .attrTween("transform", tween2); 
     } 
    }; 

}(d3)); 

window.document.addEventListener("DOMContentLoaded", function(event) { 
    'use strict'; 
    var DraggableCircles = window.DraggableCircles; 

    DraggableCircles.run(); 
});

我也會假設你想補間不透明，interpolateString 那麼它不支持這個功能。也許還有其他方式來補償不透明度。不確定。

來源

2016-12-14 08:59:07 Vlad

我如何圍繞一個固定的圓圈拖動圈 - d3.js

回答

相關問題