Javascript 无法在div内对齐d3元素的svg:g

先测试甜甜圈
#首先{
身高：80%；
宽度：30%；
边框：3px实心#73AD21！重要；
位置：绝对！重要；
}
.切片路径{
冲程：#fff；
笔画宽度：1px；
}
.textTop{
字体系列：“时代”；
字体大小：粗体；
字体大小：15磅；
填充：#2c3218；
}
.textbooth{
填充：#444；
字体系列：“时代”；
字体大小：粗体；
字号：20pt；
}
.顶{
边框：1px实心#bbb；
颜色：#777；
字体系列：“SegoeUI”；
文字装饰：无；
}
.top:悬停{
边框：1px实心#555；
颜色：#333；
}
.工具提示{
背景：#eee；
盒影：0 0 5px#999999；
颜色：#080808；
线高：16px；
边框：1px实心#d4；
显示：内联块；
字体大小：12px；
/*填充：10px*/
位置：绝对位置；
文本对齐：居中；
宽度：自动；
高度：自动；
z指数：10；
不透明度：0.8；
}
函数resize（）{
var w=document.getElementById（'first'）.clientWidth；
//警报（w）；
var h=document.getElementById（'first'）.clientHeight；
//警报（h）；
var r=数学最小值（w，h）/2；
//警报（r）；
var first=$（“#first”），
aspect=first.width（）/first.height（），
first=first.parent（）；
$（窗口）.on（“调整大小”，函数（）{
var targetWidth=first.width（）；
首先，attr（“宽度”，targetWidth）；
首先是attr（“高度”，数学圆（targetWidth/aspect））；
}).触发（“调整大小”）；
返回{
w:w，
h:h，
r:r
};
}
函数优先（）{
var w=resize（）.w，
h=调整大小（）.h，
r=调整大小（）；
var内部=0；
var color=d3.scale.category20（）；
风险值数据=[
["192.168.12.1", 20],
["76.09.45.34", 40],
["34.91.23.76", 80],
["192.168.19.32", 16],
["192.168.10.89", 50],
["192.178.34.07", 18],
["192.168.12.98", 30]
];
var data=data.map（函数（d）{
返回{
IP:d[0]，
计数：d[1]
};
});
var total=d3.总和（数据，函数（d）{
返回d3.和（d3.值（d））；
});
var svg=d3。选择（“第一个”）
.数据（[数据]）
.append（“svg”）
.classed（“svg内容”，真）
.attr（“宽度”，“100%”）
.attr（“高度”，“100%”）
.attr（“视图框”，“0 0 960 500”）
.attr（“保存Aspectratio”，“xMinYMax满足”）
.append（“svg:g”）
.attr（“转换”、“转换”（+w/2+）、“+h+”）；
var tooltip=d3。选择（“#first”）
.append（'div'））
.attr（'class'，'tooltip'）；
工具提示。追加（'div'）
.attr（'class'，'label'）；
工具提示。追加（'div'）
.attr（'class'，'count'）；
工具提示。追加（'div'）
.attr（“类别”、“百分比”）；
var arc=d3.svg.arc（）
.内半径（内）
.外层（r+20）；
var arcOver=d3.svg.arc（）
.内半径（内）
.外层（r+25）；
var pie=d3.layout.pie（）
.sort（空）
.startAngle（1.1*Math.PI）
.endAngle（3.1*Math.PI）
.价值（功能（d）{
返回d.count；
});
var arcs=svg.selectAll（“g.slice”）
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”、“切片”）
.on（“鼠标悬停”，功能（d）{
d3.select（this.select（“路径”）.transition（）
.持续时间（200）
.attr（“d”，arcOver）
.style（“不透明度”，0.7）
var total=d3.sum（data.map）（函数d）{
返回d.count；
}));
变量百分比=数学四舍五入（1000*d.data.count/总数）/10；
tooltip.select（'.label'）.html（d.data.IP）；
工具提示。选择（'.count'）.html（d.data.count）；
工具提示。选择（'.percent'）.html（percent+'%'）；
样式（'display'，'block'）；
})
.on（'mousemove'，函数（d）{
tooltip.style（“左”，（d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY）+“px”）；
})
.开启（“鼠标出”，功能（d）{
d3.select（this.select（“路径”）.transition（）
.持续时间（100）
.attr（“d”，弧）
.style（'opacity'，1）；
样式（'display'，'none'）；
});
arcs.append（“svg:path”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）
.transition（）
.ease（“exp”）
.持续时间（1000）
.attrTween（“d”，tweenPie）；
函数tweenPie（b）{
var i=d3.插值({
startAngle:1.1*Math.PI，
端角：1.1*Math.PI
}，b）；
返回函数（t）{
返回弧（i（t））；
};
}
var legend=svg.append（“svg:g”）
.attr（“转换”、“转换”（“+w+”，-“+h/2+”））
.attr（“类”、“图例”）
.全选（“g”）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*25+”）；
});
图例。追加（“rect”）
.attr（“宽度”，20）
.attr（“高度”，20）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
图例。追加（“文本”）
.attr（“x”，24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“字体大小”，“20磅”）
.style（“字体系列”、“时代”）
.文本（功能（d）{
返回d.IP；
});
}
第一个（）；

更改：

<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>

致：

更改：

<div id="first" viewBox="0 0 960 500" perserveAspectRatio="xMinYMid meet"></div>

致：