Javascript D3.js onclick切换其他线颜色

你能帮我解释一下为什么这个不能正常工作吗

这是一个物理演示，它的概念是，如果我点击它，我可以改变线条的颜色，当我点击一个矩形时，我想改变所有边（围绕它的线条）的颜色，并且总是换成另一种颜色。所以线条是白色或红色的，只有线条的颜色会改变，我可以点击线条或矩形。这段代码几乎可以正常工作

还有两个问题：

如果单击矩形，则边将颜色更改为红色，而不是背面

如果前1行为红色，则不会变为白色

我希望我说的很清楚，这就是我被困的地方：

//网格基本变量
变量维度=10，
宽度=50，
高度=50；
函数gridData（）{
var data=新数组（）；
//矩形变量
var rectXpos=0，
直肠口=0，
矩形宽度=宽度，
高度=高度；
单击=0；
//对行进行迭代
对于（变量行=0；行<维度；行++）{
//迭代行内的单元格/列
对于（变量列=0；列<维度；列++）{
//rectClass=“rect”+rectXpos.toString（）+rectYpos.toString（）；
数据推送({
x:rectXpos，
y:直肠，
宽度：矩形宽度，
高度：垂直高度，
//类别：rectClass，
点击：点击
});
//增加x位置，即将其移动50（宽度可变）
rectXpos+=rectWidth；
}
//行完成后重置x位置
rectXpos=0；
//增加下一行的y位置。将其向下移动50（高度变量）
直肠口+=直肠高度；
}
返回数据；
}
var gridData=gridData（）；
//我喜欢将数据记录到控制台以进行快速调试
console.log（gridData）；
var grid=d3。选择（“网格”）
.append（“svg”）
.attr（“宽度”，宽度*尺寸）
.attr（“高度”，高度*尺寸）；
var rect=grid.selectAll（“.square”）
.数据（网格数据）
.enter（）.append（“rect”）
.attr（“类”、“rect”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
.attr（“宽度”，函数（d）{返回d.width；}）
.attr（“height”，函数（d）{返回d.height；}）
.样式（“填充”，“#f2f2”）
.style（“笔划”、“fff”）
.打开（“单击”，功能（d）{
d、 点击++；
var nextColor=（this.style.stroke==“红色”）？“白色”：“红色”；
d3.选择（“.vline”+d.x.toString（）+d.y.toString（）+（d.x+50）.toString（）+d.y.toString（））.style（“笔划”，下一个颜色）；
d3.选择（“.vline”+d.x.toString（）+（d.y+50）。toString（）+（d.x+50）。toString（）+（d.y+50）。toString（））。样式（“笔划”，下一个颜色）；
d3.选择（“.hline”+d.x.toString（）+d.y.toString（）+d.x.toString（）+（d.y+50）.toString（））.style（“笔划”，下一个颜色）；
d3.选择（“.hline”+（d.x+50）.toString（）+d.y.toString（）+（d.x+50）.toString（）+（d.y+50）.toString（））.style（“笔划”，下一个颜色）；
});
函数hlinegriddata（）{
var data=新数组（）；
//行变量
变量hlineX1=0，
hlineY1=0，
hlineX2=0，
hlineY2=50，
单击=0；
var lineLength=宽度；
对于（变量行=0；行<维度；行++）{
//迭代行内的单元格/列
对于（变量列=0；列<维度+1；列++）{
hlineClass=“hline”+hlineX1.toString（）+hlineY1.toString（）+hlineX2.toString（）+hlineY2.toString（）；
数据推送({
x1:hlineX1，
y1:hlineY1，
x2:hlineX2，
y2:hlineY2，
班级：hlineClass，
点击：点击
});
//增加下一行的x位置
hlineX1+=线宽；
hlineX2+=线宽；
}
//行完成后重置x位置
hlineX1=0；
hlineX2=0；
//增加下一行的y位置。将其向下移动50（高度变量）
hlineY1+=线宽；
hlineY2+=线宽；
}
返回数据；
}
var hlinegriddata=hlinegriddata（）；
//我喜欢将数据记录到控制台以进行快速调试
console.log（hlinegriddata）；
var hline=grid.selectAll（“.hline”）
.data（hlinegriddata）
.enter（）.append（“行”）
.attr（“类”，函数（d）{返回d.class；}）
.attr（“x1”，函数（d）{返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）
.style（“笔划”、“白色”）
.样式（“笔划宽度”、“4”）
.style（“光标”、“指针”）
.on（“单击”，function（）{var nextColor=this.style.stroke==“白色”？“红色”：“白色”；
d3.选择（此）.样式（“笔划”，下一个颜色）；
});
//.on（'点击'）功能（d）{
//d.单击++；
//如果（（d.click）%2==0）{d3.select（this）.style（“stroke”，“#fff”）；}
//如果（（d.click）%2==1）{d3.select（this）.style（“stroke”，“red”）；}
// });
函数vlinegriddata（）{
var data=新数组（）；
//行变量
var VL1=0，
Vline1=0，
Vl2=50，
vlineY2=0，
单击=0；
var lineLength=宽度；
//对行进行迭代
对于（变量行=0；行<维度；行++）{
//迭代行内的单元格/列
对于（变量列=0；列<维度+1；列++）{
vlineClass=“vline”+vlineX1.toString（）+vlineY1.toString（）+vlineX2.toString（）+vlineY2.toString（）；
数据推送({
x1:VL1，
y1:vlineY1，
x2:VL2，
y2:vlineY2，
类别：vlineClass，
点击：点击
});
//增加下一行的x位置
Vline1+=线宽；
vlineY2+=线宽；
}
//行完成后重置x位置
Vline1=0；
vlineY2=0；
//增加下一行的y位置。将其向下移动50（高度变量）
VL1+=线宽；
VL2+=线宽；
}
返回数据；
}
var vlinegriddata=vlinegriddata（）；
//我喜欢将数据记录到控制台以进行快速调试
console.log（vlinegriddata）；
var vline=grid.selectAll（“.vline”）
.数据（vlinegriddata）
.enter（）.append（“行”）
.attr（“类”，函数（d）{返回d.class；}）
.attr（“x1”，函数（d）{返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）
.attr（“单击”），函数
hline
    .each(function(d){
        d.switch = 0;
    })
vline
    .each(function(d){
        d.switch = 0;
    })

hline
    .on("click",function(d){
        var Color = ["white","red"];
        //switch ===> 0 or 1 
        d.switch = d.switch ^ 1;
        //color ===> "white" or "red"
        var nextColor = Color[d.switch];
        d3.select(this).style("stroke", nextColor);
    })

vline
    .on("click",function(d){
        var Color = ["white","red"];
        //switch ===> 0 or 1 
        d.switch = d.switch ^ 1;
        //color ===> "white" or "red"
        var nextColor = Color[d.switch];
        d3.select(this).style("stroke", nextColor);
    })

rect
.on("click", function(d){
    var Color = ["white" , "red"];
    d3.select(".vline" + d.x.toString() + d.y.toString() + (d.x + 50).toString() + d.y.toString()).style("stroke", Next_Color);
    d3.select(".vline" + d.x.toString() + (d.y + 50).toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", Next_Color);
    d3.select(".hline" + d.x.toString() + d.y.toString() + d.x.toString() + (d.y + 50).toString()).style("stroke", Next_Color);
    d3.select(".hline" + (d.x + 50).toString() + d.y.toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", Next_Color);
    function Next_Color(d){
        var Color = ["white","red"];
        d.switch = d.switch ^ 1;
        var next_Color = Color[d.switch];
        return next_Color;
    }
});