Javascript 使用D3将多个图形添加到一个页面

我想弄清楚如何将两个d3图形放在同一页上，一个在左边，一个在右边。然而，我得到的是这个。

这是我的html文件

svg{
字体：10px无衬线；
}
.多段线路径{
填充：无；
行程：#666；
形状渲染：边缘清晰；
}
.轴线，
.轴路径{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.轴文本{
文本阴影：01px0#fff，1px0#fff，0-1px0#fff，-1px0#fff；
光标：移动；
}
.xaxis文本{
字体：10px无衬线；
}
.yaxis文本{
字体：10px无衬线；
}
.xaxis路径，
.xaxis线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.yaxis路，
亚克西斯线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
//https://my.up.ist.psu.edu/lng5099/project3.html   

发现我的边距、宽度和高度的定位有问题。有java代码可供任何需要帮助的人使用

（函数（）{
var margin={顶部：20，右侧：30，底部：30，左侧：40}，
宽度=700-边距。左侧-边距。右侧，
高度=600-margin.top-margin.bottom；
var x=d3.scale.ordinal（）.rangePoints（[0，宽度]，1），
y={}；
var axis=d3.svg.axis（）.orient（“左”）；
var line=d3.svg.line（）//定义一个函数将点转换为多段线
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.interpolate（“linear”）；//线条样式。您可以尝试使用“cardinal”。
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var cars=[]；
d3.csv（“cars.csv”），类型，功能（错误，数据）{
汽车=数据；
drawPC（）；
});
函数drawPC（）{
//提取尺寸列表并为每个尺寸创建比例。
用于（车辆[0]中的var dim）{
如果（dim！=“名称”）{
y[dim]=d3.刻度.线性（）
.domain（[d3.min（cars，函数（d）{return+d[dim]；}），d3.max（cars，函数（d）{return+d[dim]；}）]）
.范围（[高度，0]）；
}
}
x、 域（dimensions=d3.keys（cars[0]）.filter（函数（d）{returnd！=“name”}）；
//绘制多段线
对于（var i=1；i