Javascript 在d3中以不同颜色显示一个散点图矩阵中的两个数据集

我在D3中有一个散点图矩阵代码，我想在同一个散点图矩阵（svg）中可视化两个数据集，但数据点的颜色不同

现在，当我单击“更新”按钮时，旧点将被删除，新点将从数据2中打印出来。但是我不希望删除旧的数据点，而是用不同的颜色从Data2中绘制新的数据点

该函数具有以下内容：svg.selectAll（“g”）.remove（）删除了旧的svg，但是如果我对这一行进行注释，那么更新功能根本不起作用

var数据=[{
“x”：1，
“y”：2，
“z”：1.5
},
{
“x”：2，
“y”：1.5，
“z”：1
},
{
“x”：5，
“y”：6，
“z”：3
},
{
“x”：4，
“y”：8，
“z”：5
},
];
变量数据2=[{
“x”：10，
“y”：8，
“z”：9
},
{
“x”：11，
“y”：12，
“z”：13
},
{
“x”：14，
“y”：14，
“z”：2
},
{
“x”：15，
“y”：10，
“z”：10
},
];
函数updateMe（）{
散射图矩阵（数据2）；
}
var宽度=660，
尺寸=250，
填充=40；
var x=d3.scaleLinear（）
.范围（[padding/2，size-padding/2]）；
变量y=d3.scaleLinear（）
.范围（[size-padding/2，padding/2]）；
var xAxis=d3.axisBottom（x）
var yAxis=d3.轴左（y）
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，尺寸*3+填充）
.attr（“高度”，尺寸*3+填充）
.附加（“g”）
.attr（“转换”、“转换”（“+padding+”，“+padding/2+”））；
函数散点图矩阵（数据）{
var domainByTrait={}，
traits=d3.键（数据[0]）.过滤器（函数（d）{
返回d！=“name”；
})，//不返回名称
n=长度；
特征。forEach（功能（特征）{
domainByTrait[trait]=d3.extent（数据，函数（d）{
返回d[trait]；
});
});
xAxis.tickSize（大小*n）；
yAxis.tickSize（-size*n）；
svg.selectAll（“g”）.remove（）；
svg.selectAll（“.x.axis”）
.数据（特征）
.enter（）.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”，函数（d，i）{
返回“translate（“+（n-i-1）*size+”，0）”；
})
.每个功能（d）{
x、 域（domainByTrait[d]）；
d3.选择（this）.call（xAxis）；
});
svg.selectAll（“.y.axis”）
.数据（特征）
.enter（）.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*size+”）；
})
.每个功能（d）{
y、 域（domainByTrait[d]）；
d3.选择（this）.调用（yAxis）；
});
var cell=svg.selectAll（“.cell”）
.数据（交叉（性状、性状））
.enter（）.append（“g”）
.attr（“类”、“单元”）
.attr（“转换”，函数（d）{
返回“translate”（“+（n-d.i-1）*size+”，“+d.j*size+”）；
})
.每个（地块）；
//对角线的标题。
单元过滤器（功能（d）{
返回d.i==d.j；
}).append（“文本”）
.attr（“x”，填充）
.attr（“y”，填充）
.attr（“dy”，“.71em”）
.文本（功能（d）{
返回d.x；
});
//手机通话（刷子）；
函数图（p）{
var单元格=d3。选择（此）；
x、 域（domainByTrait[p.x]）；
y、 域（domainByTrait[p.y]）；
cell.append（“rect”）
.attr（“类”、“帧”）
.attr（“x”，填充/2）
.attr（“y”，填充/2）
.attr（“宽度”，尺寸-填充）
.attr（“高度”，尺寸-填充）；
单元格。选择全部（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cx”，功能（d）{
返回x（d[p.x]）；
})
.attr（“cy”，函数（d）{
返回y（d[p.y]）；
})
.attr（“r”，4）
.样式（“填充”、“蓝色”）；
}
}
函数交叉（a，b）{
var c=[]，
n=a.长度，
m=b.长度，
i、 j；
对于（i=-1；++i
svg{
字体：10px‘ProximaNova’；
填充：10px；
}
轴
.框架{
形状渲染：边缘清晰；
}
.轴线{
行程：#ddd；
}
.轴路径{
显示：无；
}
.单元格文本{
字体大小：粗体；
文本转换：大写；
}
.框架{
填充：无；
冲程：#aaa；
}
圈{
填充不透明度：.7；
}
圈。隐藏{
填写：#ccc！重要；
}
.范围{
填写：#000；
填充不透明度：.125；
冲程：#fff；
}

更新
那么，您是想单击按钮查看第一组数据旁边的第二组数据，还是只想在开始时同时查看这两组数据？@RyanDabler感谢您的评论。任何一个都可以，但如果我从一开始就看到这两个数据，但颜色不同的话，那就更好了。所以，你是想点击按钮看到第一组数据旁边的第二组数据，还是只想从一开始就看到这两个数据？@RyanDabler谢谢你的评论。任何一个都可以，但如果我一开始就看到它们在一起，但颜色不同，那就更好了。