D3 过渡在 dragend 事件中间停止

Question

任何人都可以帮助解决这种情况吗？ 我有两个圆圈，一个在另一个圆圈内，当我拖动外部圆圈时应该一起移动。 只有当鼠标悬停在外圈上时，内圈才会出现。 拖动完成后，两个圆圈都应该回到原点位置。 这是一个example的小提琴。 这是它的代码：

    var deg90 = Math.PI / 2,
ptOuter = [200, 250],
rOuter = 70,
rInner = 10;

var ptInner = innerCircleXY(ptOuter[0],ptOuter[1],rOuter,rInner);

var drag = d3.behavior.drag()
.on("drag", function () {
    var c2NewX=parseInt(outerCircle.attr("cx"),10) + d3.event.dx;
    var c2NewY=parseInt(outerCircle.attr("cy"),10) + d3.event.dy;
    var icNewX=parseInt(innerCircle.attr("cx"),10) + d3.event.dx;
    var icNewY=parseInt(innerCircle.attr("cy"),10) + d3.event.dy;

    outerCircle.attr({
        "cx": c2NewX,
        "cy": c2NewY
    });
    innerCircle.attr({"cx":icNewX, "cy":icNewY});
})
.on("dragend",function() {
    innerCircle.transition().attr({"cx": ptInner[0],"cy": ptInner[1]});
    outerCircle.transition().attr({"cx": ptOuter[0],"cy": ptOuter[1]});
});

var svg = d3.select('body').append('svg');

var outerCircle = svg.append('circle').attr({
    cx: ptOuter[0],
    cy: ptOuter[1],
    r: rOuter,
    fill: '#FFA300',
    stroke: '#FFA300',
    "stroke-width": 0})
    .style({'cursor': 'pointer'})
    .call(drag);

var innerCircle = svg.append('circle').attr({
    "id":"clicks",
    cx: ptInner[0],
    cy: ptInner[1],
    r: rInner,
    fill: 'white',
    stroke: '#666666',
    "stroke-width": 1,
    "stroke-opacity": 0.9})
    .style({'cursor': 'pointer', 'opacity':'0.0'});

outerCircle.on("mouseover", function(){innerCircle.transition().style({'opacity':'1.0'}).duration(300);});
outerCircle.on("mouseout", function(){innerCircle.transition().style({'opacity':'0.0'}).duration(300);});

函数 innerCircleXY(oX, oY, oR, iR) { var rDiff = Math.abs(oR - iR); 变量角度 = Math.PI/3; // 60度 var x = oX + rDiff*Math.sin(角度); var y = oY + rDiff*Math.cos(角度); 返回（[x，y]）； }

问题是当我拖动外圈放开时，内圈并没有一直往回走，而是停在了中间。 我不确定我做错了什么。

--> 更新 这是任意发生的，可能是特定操作系统或浏览器的情况（对我来说，它是带有 chrome 或 safari 的 OSX）。

这是我电脑上发生的事情的screencast。

Answer 1

截屏视频对我不起作用，但我认为问题出在这条线（还有鼠标悬停线，但不太可能发生）...

outerCircle.on("mouseout", function(){innerCircle.transition().style({'opacity':'0.0'}).duration(300);});

我认为可能发生的情况是，如果您移动鼠标，过渡与之前发生的过渡冲突，所以感觉是断断续续的，因为这并不总是发生。

因此，您可能需要考虑在这种情况下您希望发生什么。如果您注释掉这条线，我认为它应该可以正常工作（不改变不透明度）。