D3在Dragend事件的中间停止

Question

有人可以帮助这种情况吗？我有两个圆圈，另一个圆圈在我拖动外部时应该一起移动。仅当鼠标越过外圈时，内圆才会出现。拖动完成后，两个圆圈都应返回原点位置。这是一个有示例的小提琴。这是它的代码：

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

函数nirncirclexy（ox，oy或，ir）{ var rdiff = math.abs（或-ir）; var Angle = Math.pi/3;//60度 var x = ox rdiff*math.sin（Angle）; var y = oy rdiff*MATH.COS（Angle）; 返回（[x，y]）;}

问题是，当我拖动外圈并释放时，内圆并不能一直返回，而是停在中间。我不确定我在做什么错。

-> update＆lt; - 这是任意发生的，可能是特定的OS或浏览器的情况（对我而言，它是带有Chrome或Safari的OSX）。

这是我计算机上发生的事情的屏幕截图。

Answer 1

屏幕截图对我不起作用，但我认为问题是这一行（以及鼠标线，但它不太可能发生）...

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

我认为可能发生的事情可能是，过渡与以前的过渡发生冲突，如果您移动鼠标，那么感觉会间歇性，因为这并不总是发生。

因此，您可能需要考虑在这种情况下想发生的事情。如果您评论界线，我认为它应该可以正常工作（没有不透明度更改）。