Question

参考this fiddle我已将代码更改为this one.但我需要一些帮助才能将小圆圈拖动并重新定位到d3.layout.force

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

提前致谢

Answer 1

不是答案，但会帮助您入门：

`/**
 * @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 好吧，这个功能不支持。也许还有其他方式来填补不透明度。不确定。

如何在固定圆圈周围制作可拖动的圆圈 - d3.js

1 个答案: