Javascript 重叠时如何更改两个圆的颜色？

你好，我想知道当两个圆圈重叠时，两个圆圈如何改变颜色。最好重叠的部分将变为白色，因为它表示集合

var canvas=d3.选择（“画布”），
context=canvas.node（）.getContext（“2d”），
宽度=canvas.property（“宽度”），
高度=canvas.property（“高度”），
半径=32；
变量圆=d3.范围（4）.映射（函数（i）{
返回{
索引:i,，
x:Math.round（Math.random（）*（宽度-半径*2）+半径），
y:Math.round（Math.random（）*（高度-半径*2）+半径）
};
});
var color=d3.scaleOrdinal（）
.范围（d3.SchemeCategory 20）；
render（）；
canvas.call（d3.drag（）
.主题（dragsubject）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
.on（“start.render drag.render end.render”，render））；
函数render（）{
clearRect（0，0，宽度，高度）；
对于（变量i=0，n=circles.length，circle；i=0；--i）{
圆圈=圆圈[i]；
x=圆.x-d3.event.x；
y=圆.y-d3.event.y；
如果（x*x+y*y

SVG

混合混合模式

从

屏幕

悬停到

正常

这并不完全是您想要的，因为它不允许您通过编程控制相交段的颜色，但是CSS是我在d3中使用的一个非常简单的解决方案。我曾试图完成同样的事情，但在为大型数据集设置动画时计算交点时遇到了性能问题。如果这需要在IE/Edge中使用，可能会引起关注，但除此之外，大多数模式在Chrome、Firefox和Safari（甚至是移动设备）中都受支持

这里有一个关于d3的好例子和一个简化的例子

---

否则看起来你已经找到了。要使其与拖动一起工作，您需要编写计算来确定哪些圆重叠，然后计算它们的交点面积。

您可以在动态进近（第三个片段）的

拖动
函数中使用静态进近（第二个片段）的
交点
函数

首先，让我们创建两个组，这样“交叉点”路径将始终位于圆的前面：

var g1 = svg.append("g");
var g2 = svg.append("g");

现在来谈谈重要的部分

在拖动的
函数中，获取另一个（未拖动）圆的位置：

如果你有两个以上的圆圈，你将不得不重构它，但我下面的演示只有两个圆圈，所以让我们继续

然后，检查它们是否重叠：

Math.hypot(d.x - otherCircle.x, d.y - otherCircle.y) < 2 * radius

如果没有，请删除路径：

path.attr("d", null)

以下是工作演示：


var svg=d3.选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
半径=60；
var数据=d3.范围（2）.映射（函数（d，i）{
返回{
x:i？200:400，
y:150
};
});
var g1=svg.append（“g”）；
var g2=svg.append（“g”）；
var color=d3.scaleOrdinal（）
.范围（d3.SchemeCategory 10）；
变量圆=g1。选择全部（“圆”）
.数据（数据）
.enter（）.append（“圆”）
.style（“填充不透明度”，0.3）
.style（“笔划”、“黑色”）
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
})
.attr（“r”，半径）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
})
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var path=g2.append（“路径”）
.样式（“填充”、“白色”）
.style（“笔划”、“黑色”）
.attr（“d”，空）；
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d，i）{
d3.选择（this）.attr（“cx”，d.x=d3.event.x）.attr（“cy”，d.y=d3.event.y）；
var otherCircle=circles.filter（函数（e，j）{
返回i！==j；
}).datum（）；
if（数学形法（d.x-其他圆.x，d.y-其他圆.y）<2*半径）{
var interPoints=交点（d.x，d.y，半径，otherCircle.x，otherCircle.y，半径）；
attr（“d”，函数（）{
返回“M”+插入点[0]+，“+插入点[2]+“A”+半径+，“+半径”+
“0,1”+插入点[1]+”，“+插入点[3]+”A“+半径+”，“+半径+
“0,1”+插入点[0]+”，“+插入点[2]；
})
}否则{
path.attr（“d”，null）
}
}
函数d（d）{
d3.选择（此）.classed（“活动”，false）；
}
函数交点（x0、y0、r0、x1、y1、r1）{
变量a、dx、dy、d、h、rx、ry；
变量x2，y2；
/*dx和dy是两个方向之间的垂直和水平距离
*圆圈的中心。
*/
dx=x1-x0；
dy=y1-y0；
/*确定中心之间的直线距离*/
d=数学sqrt（（dy*dy）+（dx*dx））；
/*检查可解性*/
如果（d>（r0+r1））{
/*没有解决方案。圆不相交*/
返回false；
}
if（dvar interPoints = intersection(d.x, d.y, radius, otherCircle.x, otherCircle.y, radius);
path.attr("d", function() {
  return "M" + interPoints[0] + "," + interPoints[2] + "A" + radius + "," + radius +
    " 0 0,1 " + interPoints[1] + "," + interPoints[3] + "A" + radius + "," + radius +
    " 0 0,1 " + interPoints[0] + "," + interPoints[2];
})

path.attr("d", null)