Javascript 两个带有公共下拉菜单的D3.js热图

我试图创建两个热图，显示由一个通用日期下拉列表更新的不同数据。我正在使用并创建两个单独的SVG，以便在下拉列表中选择新的日期字段时进行更新。我能够按照一些答案在同一页中创建两个图，但我完全不知道，只有一个下拉位置同时更新两个图表。任何关于如何实现这一点的建议都将不胜感激。我已经包括了我一直在使用的代码和json数据。我现在有两个不同的文件中的数据。如果只从一个文件中读取位置下拉列表值会更好

var数据集；
var数据集2；
变量天数=[“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]，
次数=d3.范围（24）；
var-margin={顶部：40，右侧：50，底部：70，左侧：50}；
//根据窗口大小计算宽度和高度
var w=数学最大值（数学最小值（window.innerWidth，1000），500）-margin.left-margin.right-20，
gridSize=数学楼层（w/乘以长度），
h=网格大小*（天数长度+2）；
//重置整体字体大小
var newFontSize=w*62.5/900；
d3.选择（“html”）.style（“字体大小”，newFontSize+“%”）；
//svg容器
var svg=d3。选择（“热图”）
.append（“svg”）
.attr（“宽度”，w+页边距。顶部+页边距。底部）
.attr（“高度”，h+margin.left+margin.right）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//svg容器
var svg2=d3。选择（“热图2”）
.append（“svg”）
.attr（“宽度”，w+页边距。顶部+页边距。底部）
.attr（“高度”，h+margin.left+margin.right）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//线性色标
var colors=d3.scaleLinear（）
.域（d3.范围（1,11,1））
.范围（[“#87cefa”、“#86c6ef”、“#85bde4”、“#83b7d9”、“#82afce”、“#80a6c2”、“#7e9fb8”、“#7995aa”、“#758b9e”、“#708090”）；
var dayLabels=svg.selectAll（“.dayLabel”）
.数据（天）
.输入（）
.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，0）
.attr（“y”，函数（d，i）{return i*gridSize；}）
.style（“文本锚定”、“结束”）
.attr（“转换”、“平移（-6“+gridSize/1.5+”））
var dayLabels=svg2.selectAll（“.dayLabel”）
.数据（天）
.输入（）
.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，0）
.attr（“y”，函数（d，i）{return i*gridSize；}）
.style（“文本锚定”、“结束”）
.attr（“转换”、“平移（-6“+gridSize/1.5+”））
var timeLabels=svg.selectAll（“.timeLabel”）
.数据（次）
.输入（）
.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，函数（d，i）{return i*gridSize；}）
.attr（“y”，0）
.style（“文本锚定”、“中间”）
.attr（“transform”、“translate”（+gridSize/2+）、-6）”；
var timeLabel=svg2.selectAll（“.timeLabel”）
.数据（次）
.输入（）
.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，函数（d，i）{return i*gridSize；}）
.attr（“y”，0）
.style（“文本锚定”、“中间”）
.attr（“transform”、“translate”（+gridSize/2+）、-6）”；
//加载数据热图1
d3.json（“test.json”），函数（错误，数据）{
data.forEach（函数（d）{
d、 日=+d.日；
d、 小时=+d.hour；
d、 值=+d.值；
});
数据集=数据；
//按位置分组数据
var nest=d3.nest（）
.key（函数（d）{返回d.location；}）
.条目（数据集）；
//数据中的位置数组
var locations=nest.map（函数（d）{return d.key；}）；
var currentLocationIndex=0；
//创建位置下拉菜单
var locationMenu=d3。选择（“locationDropdown1”）；
位置菜单
.append（“选择”）
.attr（“id”、“位置菜单”）
.selectAll（“选项”）
.数据（位置）
.输入（）
.附加（“期权”）
.attr（“值”，函数（d，i）{return i；}）
.text（函数（d）{return d；}）；
//函数创建初始热图
var drawHeatmap=功能（位置）{
//过滤数据以返回感兴趣位置的对象
var selectLocation=nest.find（函数（d）{
返回d.key==位置；
});
var heatmap=svg.selectAll（“.hour”）
.data（选择location.values）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return（d.hour-1）*gridSize；}）
.attr（“y”，函数（d）{return（d.day-1）*gridSize；}）
.attr（“类”、“小时边界”）
.attr（“宽度”，网格大小）
.attr（“高度”，网格大小）
.style（“笔划”、“白色”）
.style（“笔划不透明度”，0.6）
.style（“填充”，函数（d）{返回颜色（d.value）；}）
}
图纸热图（位置[currentLocationIndex]）；
var updateHeatmap=函数（位置）{
//过滤数据以返回感兴趣位置的对象
var selectLocation=nest.find（函数（d）{
返回d.key==位置；
});
//更新数据并重新绘制热图
var heatmap=svg.selectAll（“.hour”）
.data（选择location.values）
.transition（）
.持续时间（500）
.style（“填充”，函数（d）{返回颜色（d.value）；}）
}
//当下拉选择更改时运行更新功能
locationMenu.on（“更改”，函数（）{
//查找从下拉列表中选择的位置
var selectedLocation=d3.选择（此）
.选择（“选择”）
.财产（“价值”）；
currentLocationIndex=+所选位置；
//使用所选位置运行更新功能
更新HeatMap（位置[currentLocationIndex]）；
});    
})
//加载数据热图2
d3.json（“test2.json”，函数（错误，数据2）{
数据2.forEach（函数（d2）{
d2.day=+d2.day；
d2.hour=+d2.hour；
d2.value=+d2.value；
});
数据集2=数据2；
//按位置分组数据
nest2变种=