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

function innerCircleXY（oX，oY，oR，iR）{ var rDiff = Math.abs（oR - iR）; var angle = Math.PI / 3; // 60度 var x = oX + rDiff * Math.sin（angle）; var y = oY + rDiff * Math.cos（angle）; return（[x，y]）; }

问题在于，当我拖动外圈并释放时，内圈不会一直向后移动，而是在中间停止。我不确定我做错了什么。

- ＆GT;更新＆lt; - 这种情况是随意发生的，可能是特定操作系统或浏览器的情况（对我而言，它是带有chrome或safari的OSX）。

以下是我的计算机上发生的screencast。

Answer 1

截屏视频对我来说不起作用，但我认为问题在于这一行（以及鼠标悬停线，但不太可能发生）......

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

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

所以你可能需要考虑一下你在这种情况下想要发生什么。如果你对该行进行评论，我认为它应该可以正常工作（没有不透明度的变化）。

D3过渡在dragend事件中停止

1 个答案: