Javascript 仅显示2个图表中的1个的页面

在本文中，我尝试使用D3.js创建两个树状图，但只显示第二个树状图。当我检查控制台中的元素时，我可以看到创建了两个不同的svg并将其写入DOM，但只有第二个“g”标记填充了svg rect元素。有两个具有不同id的不同div标记。如何并排绘制2个D3.sj树形图？多谢各位

D3.js代码

var margin={top:10，right:10，bottom:10，left:10}，
宽度=445-margin.left-margin.right，
高度=445-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3.选择（“#我的_dataviz1”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取json数据
d3.json（“https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json，函数（数据）{
//将数据提供给此群集布局：
var root=d3.hierarchy（data）.sum（函数（d）{return d.value}）//这里每个假期的大小在输入数据的'value'字段中给出
//然后d3.treemap计算层次结构中每个元素的位置
d3.treemap（）
.尺寸（[宽度、高度]）
.paddingTop（28）
.paddingRight（7）
.paddingner（3）//在每个矩形之间填充
//.填塞器（6）
//.填充（20）
（根）
//准备一个色标
var color=d3.scaleOrdinal（）
.domain（[“source1”、“source2”、“source3”]）
.范围（[“#402D54”、“#D18975”、“#8FD175”]）
//和一个不透明度刻度
var opacity=d3.scaleLinear（）
.domain（[10,30]）
.范围（[.5,1]）
//使用此信息添加矩形：
svg
.selectAll（“rect”）
.data（root.leaves（））
.输入（）
.append（“rect”）
.attr（'x'，函数（d）{返回d.x0；}）
.attr（'y'，函数（d）{返回d.y0；}）
.attr（'width'，函数（d）{返回d.x1-d.x0；}）
.attr（'height'，函数（d）{返回d.y1-d.y0；}）
.style（“笔划”、“黑色”）
.style（“fill”，函数（d）{返回颜色（d.parent.data.name）}）
.style（“不透明度”，函数（d）{返回不透明度（d.data.value）}）
//和添加文本标签
svg
.selectAll（“文本”）
.data（root.leaves（））
.输入（）
.append（“文本”）
.attr（“x”，函数（d）{return d.x0+5}）//+10以调整位置（更右）
.attr（“y”，函数（d）{返回d.y0+20}）/+20以调整位置（降低）
.text（函数（d）{return d.data.name.replace（'mister_'，''）}）
.attr（“字体大小”，“19px”）
.attr（“填充”、“白色”）
//和添加文本标签
svg
.selectAll（“VAL”）
.data（root.leaves（））
.输入（）
.append（“文本”）
.attr（“x”，函数（d）{return d.x0+5}）//+10以调整位置（更右）
.attr（“y”，函数（d）{返回d.y0+35}）/+20以调整位置（下部）
.text（函数（d）{return d.data.value}）
.attr（“字体大小”，“11px”）
.attr（“填充”、“白色”）
//为3组添加标题
svg
.选择全部（“标题”）
.data（root.subjects（）.filter（函数（d）{return d.depth==1}））
.输入（）
.append（“文本”）
.attr（“x”，函数（d）{return d.x0}）
.attr（“y”，函数（d）{返回d.y0+21}）
.text（函数（d）{return d.data.name}）
.attr（“字体大小”，“19px”）
.attr（“fill”，函数（d）{返回颜色（d.data.name）}）
//为3组添加标题
svg
.append（“文本”）
.attr（“x”，0）
.attr（“y”，14）/+20以调整位置（下部）
.文本（“三组来源”）
.attr（“字体大小”，“19px”）
.attr（“填充”、“灰色”）
})
var margin={顶部：10，右侧：10，底部：10，左侧：10}，
宽度=445-margin.left-margin.right，
高度=445-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3.选择（“#我的_dataviz2”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取json数据
d3.json（“https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json，函数（数据）{
//将数据提供给此群集布局：
var root=d3.hierarchy（data）.sum（函数（d）{return d.value}）//这里每个假期的大小在输入数据的'value'字段中给出
//然后d3.treemap计算层次结构中每个元素的位置
d3.treemap（）
.尺寸（[宽度、高度]）
.paddingTop（28）
.paddingRight（7）
.paddingner（3）//在每个矩形之间填充
//.填塞器（6）
//.填充（20）
（根）
//准备一个色标
var color=d3.scaleOrdinal（）
.domain（[“source1”、“source2”、“source3”]）
.范围（[“#402D54”、“#D18975”、“#8FD175”]）
//和一个不透明度刻度
var opacity=d3.scaleLinear（）
.domain（[10,30]）
.范围（[.5,1]）
//使用此信息添加矩形：
svg
.selectAll（“rect”）
.data（root.leaves（））
.输入（）
.append（“rect”）
.attr（'x'，函数（d）{返回d.x0；}）
.attr（'y'，函数（d）{返回d.y0；}）
.attr（'width'，函数（d）{返回d.x1-d.x0；}）
.attr（'height'，函数（d）{返回d.y1-d.y0；}）
.style（“笔划”、“黑色”）
.style（“fill”，函数（d）{返回颜色（d.parent.data.name）}）
.style（“不透明度”，函数（d）{返回不透明度（d.data.value）}）
//和添加文本标签
svg
.selectAll（“文本”）
.data（root.leaves（））
.输入（）
.append（“文本”）
.attr（“x”，函数（d）{return d.x0+5}）//+10以调整位置（更右）
.attr（“y”，函数（d）{返回d.y0+20}）/+20以调整位置（降低）
.text（函数（d）{return d.data.name.replace（'mister_'，''）}）
.attr（“字体大小”，“19px”）
.attr（“填充”、“白色”）
//和添加文本标签
var svg = d3.select("#my_dataviz1")//etc...
var svg = d3.select("#my_dataviz2")//etc..

var svg = d3.select("#my_dataviz1")//etc...
var svg2 = d3.select("#my_dataviz2")//etc...