D3.js 检测rect是否完全位于圆d3js内

我试图检测我的矩形是否完全封闭在圆内。如果矩形完全封闭在圆中，我希望它保持“钢蓝色”，如果它接触或穿过线，我希望它切换为红色

我已经找到了一种基于x，y，cx，cy和r的方法来确定它是否在圆的边界框内，但是我需要对照实际的圆进行检查

我这里有一个运行示例：

我的代码如下：

var drag = d3.behavior.drag()
.on("drag", function(){
    var self = d3.select(this)
    var dx = d3.event.dx;
    var dy = d3.event.dy;
    var x = self.attr("x")
    var y = self.attr("y")
    self.attr("x", (+x + dx))
    self.attr("y", (+y + dy))
    detection(d3.select(".circle"), d3.select(".rect"))
})


var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400)
.attr("class", "parent_svg")

svg.append("rect")
.attr("width", 400)
.attr("height", 400)
.style("fill", "#e4e5e5")

var rect = svg.append("rect")
.attr("width", 100)
.attr("height", 48)
.attr("x", 50)
.attr("y", 50)
.style("fill", "steelblue")
.attr("class", "rect")
.style("cursor", "all-scroll")
.call(drag)


var circle = svg.append("circle")
.attr("class", "circle")
.attr("r", 300/2)
.attr("cx", 350/2)
.attr("cy", 350/2)
.style("fill", "none")
.attr("stroke", "orange")
.attr("stroke-width", 1)

detection(circle, rect)

function detection(circle, rect){
    var cx = (+circle.attr("cx"))
    var cy = (+circle.attr("cy"))
    var r = (+circle.attr("r"))


    var x = (+rect.attr("x"))
    var y = (+rect.attr("y"))
    var width = (+rect.attr("width"))
    var height = (+rect.attr("height"))
    var x_range = false
    var y_range = false

    if ( x > (cx-r) && (x+width) < (cx+r)){

        x_range = true;
    }
    if ( y > (cy-r) && (y+height) < (cy+r)){
        y_range = true;
    }
    if (x_range && y_range){
        rect.style("fill", "steelblue")
    }else{
        rect.style("fill", "red")
    }
}

var drag=d3.behavior.drag（）
.on（“拖动”，函数（）{
var self=d3。选择（此）
var dx=d3.event.dx；
var dy=d3.event.dy；
var x=自属性（“x”）
变量y=自属性（“y”）
self.attr（“x”，（+x+dx））
self.attr（“y”，（+y+dy））
检测（d3.选择（“.circle”）、d3.选择（“.rect”））
})
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，400）
.attr（“高度”，400）
.attr（“类”、“父类”）
svg.append（“rect”）
.attr（“宽度”，400）
.attr（“高度”，400）
.样式（“填充”，“#e4”）
var rect=svg.append（“rect”）
.attr（“宽度”，100）
.attr（“高度”，48）
.attr（“x”，50）
.attr（“y”，50）
.样式（“填充”、“钢蓝”）
.attr（“类”、“rect”）
.style（“光标”、“全部滚动”）
.呼叫（拖动）
var circle=svg.append（“circle”）
.attr（“类”、“圈”）
.attr（“r”，300/2）
.attr（“cx”，350/2）
.属性（“cy”，350/2）
.style（“填充”、“无”）
.attr（“笔划”、“橙色”）
.attr（“笔划宽度”，1）
检测（圆形、矩形）
功能检测（圆形、矩形）{
变量cx=（+circle.attr（“cx”））
变量cy=（+circle.attr（“cy”））
var r=（+circle.attr（“r”））
变量x=（+rect.attr（“x”））
变量y=（+rect.attr（“y”））
变量宽度=（+rect.attr（“宽度”））
变量高度=（+rect.attr（“高度”））
var x_范围=假
变量y_范围=假
如果（x>（cx-r）和（x+宽度）<（cx+r））{
x_范围=真；
}
如果（y>（y-r）和（y+高度）<（y+r））{
y_范围=真；
}
if（x\u范围和y\u范围）{
矩形样式（“填充”、“钢蓝色”）
}否则{
矩形样式（“填充”、“红色”）
}
}

一种方法是迭代矩形的四个角，检查到圆心的距离是否小于半径。如果这对所有四个点都适用，则矩形位于圆内。如果1-3个点为真，则矩形与圆接触或相交

var sum = 0;
[[x,y], [x+width,y], [x,y+height], [x+width,y+height]].forEach(function(c) {
    sum += Math.sqrt(Math.pow(cx - c[0], 2) + Math.pow(cy - c[1], 2)) < r ? 1 : 0;
});

var总和=0；
[x，y]，[x+宽度，y]，[x，y+高度]，[x+宽度，y+高度]]{
sum+=Math.sqrt（Math.pow（cx-c[0]，2）+Math.pow（cy-c[1]，2））

此代码构造四个角点的坐标，并计算圆内的角数（即到中心的距离小于半径）。你现在需要做的就是检查这个数字是4还是别的什么

---

完成演示。

一种方法是迭代矩形的四个角，检查到圆心的距离是否小于半径。如果这对所有四个点都适用，则矩形位于圆内。如果1-3个点为真，则矩形与圆接触或相交

var sum = 0;
[[x,y], [x+width,y], [x,y+height], [x+width,y+height]].forEach(function(c) {
    sum += Math.sqrt(Math.pow(cx - c[0], 2) + Math.pow(cy - c[1], 2)) < r ? 1 : 0;
});

var总和=0；
[x，y]，[x+宽度，y]，[x，y+高度]，[x+宽度，y+高度]]{
sum+=Math.sqrt（Math.pow（cx-c[0]，2）+Math.pow（cy-c[1]，2））

此代码构造四个角点的坐标，并计算圆内的角数（即到中心的距离小于半径）。你现在需要做的就是检查这个数字是4还是别的什么

---

完成演示。

谢谢。真不敢相信我竟然没想到那件事。谢谢。我真不敢相信我竟然没想到这一点。