Javascript D3带水平/垂直锁定的x轴和y轴上的拖动圆

我试图沿x轴和y轴拖动一个圆，但带有锁（在同一拖动事件中不允许对角拖动）。我试图通过绘制两个垂直的矩形来实现这一点，并测试鼠标是否在其中一个矩形内，但它无法工作，因为它开始四处跳跃，并且没有正确锁定，并且交叉区域也存在问题。以前有没有人遇到过这个问题，并且对如何实现我的目标有什么想法？提前非常感谢

代码

---

下面是一个jsfiddle来更好地说明我想要实现的目标：

---

基本上，在拖动事件期间，应只允许圆在两个矩形内移动

这里有一个JSFIDLE来更好地说明我想要实现的目标：基本上，在拖动事件中，圆圈应该只允许在两个矩形内移动。我已经在问题中添加了您的评论。您可能应该在编写拖动函数时显示出一些实际的努力。Stack通常不喜欢人们发布问题并要求他们为其编写代码。我不希望其他人为我编写代码，而是想知道周围是否有人卷入此类问题，以及他们是如何解决的。发布的代码更清楚地说明了我在做什么。好吧，如果你想了解一些理论的话。。。

var svg = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200)

var circle = svg.append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 15)
    .style("fill", "purple");

var rectH = svg.insert('rect', 'circle')
    .attr('x', 85)
    .attr('y', 0)
    .attr('width', 30)
    .attr('height', 200)
    .attr('fill-opacity', 0.25)

var rectV = svg.insert('rect', 'circle')
    .attr('x', 0)
    .attr('y', 85)
    .attr('width', 200)
    .attr('height', 30)
    .attr('fill-opacity', 0.25)

circle.call(d3.behavior.drag()
     .on('drag', function(d) {
           //  
     })
)