Javascript D3js-路径卡在浏览器窗口的左上角-如何集中它们？

我希望建立一个径向图表可视化，可以很好地定位在我的页面上，x和y坐标或在分区的中心

它工作得很好，直到我在svg路径元素上添加了缩放动画。现在我的整个径向图都被塞进了左上角，我拿不出来

你能帮忙吗？非常感谢

const svg=d3
.选择（“径向图”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
常数handleMouseOver=（d，i，n）=>{
svg.selectAll（“path”）.transition（）.duration（300）.style（“opacity”，0.35）；
d3.选择（n[i]）.transition（）.持续时间（300）.样式（“不透明度”，0.35）；
};
常数handleMouseOut=（d，i，n）=>{
svg
.selectAll（“路径”）
.transition（）
.持续时间（300）
.style（“不透明度”，0.35）
.样式（“笔划宽度”，0）；
};
常量handleClick=（d，i，n）=>{
如果(
$（“#arc0”）.hasClass（“选定”）&&
$（“#arc1”）.hasClass（“选定”）&&
$（“#arc2”）.hasClass（“选定”）&&
$（“#arc3”）.hasClass（“选定”）&&
$（“#arc4”）.hasClass（“选定”）&&
$（“#arc5”）.hasClass（“选定”）&&
$（“#arc6”）.hasClass（“选定”）&&
$（“#arc7”）.hasClass（“选定”）&&
$（“#arc8”）.hasClass（“选定”）
) {
$（“.arc”）.removeClass（“选定”）；
$（“.image”）.removeClass（“选定”）；
}else{}
};
常量handleNoClick=（d，i，n）=>{
if（！$（“#arc0”）.hasClass（“选定”）&&
！$（“#arc1”）.hasClass（“选定”）&&
！$（“#arc2”）.hasClass（“选定”）&&
！$（“#arc3”）.hasClass（“选定”）&&
！$（“#arc4”）.hasClass（“选定”）&&
！$（“#arc5”）.hasClass（“选定”）&&
！$（“#arc6”）.hasClass（“选定”）&&
！$（“#arc7”）.hasClass（“选定”）&&
！$（“#arc8”）.hasClass（“选定”）
) {
$（“.arc”）.addClass（“选定”）；
$（“.image”）.addClass（“选定”）；
}else{}
};
var h=800
var w=800
常数弧=d3.arc（）；
变量arcData=[{
域名：“1”，
内半径：0，
外层：h/1.75，
startAngle：（Math.PI*-20）/180，
端角：（Math.PI*20）/180，
},
{
域名：“2”，
内半径：0，
外层：300，
startAngle：（Math.PI*20）/180，
端角：（Math.PI*60）/180，
},
{
域名：“3”，
内半径：0，
外层：280，
startAngle：（Math.PI*60）/180，
端角：（Math.PI*100）/180，
},
{
域名：“4”，
内半径：0，
外层：260，
startAngle：（Math.PI*100）/180，
端角：（Math.PI*140）/180，
},
{
域名：“5”，
内半径：0，
外层：240，
startAngle：（Math.PI*140）/180，
端角：（Math.PI*180）/180，
},
{
域名：“6”，
内半径：0，
外层：220，
startAngle：（Math.PI*180）/180，
端角：（Math.PI*220）/180，
},
{
域名：“7”，
内半径：0，
外层：200，
startAngle：（Math.PI*220）/180，
端角：（Math.PI*260）/180，
},
{
域名：“8”，
内半径：0，
外层：150，
startAngle：（Math.PI*300）/180，
端角：（Math.PI*340）/180，
},
{
域名：“9”，
内半径：0，
外层：100，
startAngle：（Math.PI*260）/180，
端角：（Math.PI*300）/180，
},
];
//订单需要来自JSON
var colorScale=d3
.scaleOrdinal（）
.域名([
"1",
" 2 ",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
])
.射程([
“#f7941e”，
“#233f92”，
“#14385c”，
“#007ac1”，
“#4c3b2d”，
“#94c83d”，
“#0000a0”，
"#440099",
“#e7253d”，
]);
常量切片=arcData.map（（d）=>arc（d））；
svg
.selectAll（“路径”）
.数据（切片）
.输入（）
.append（“路径”）
.attr（“转换”、“翻译（325550）”）
.attr（“d”，（d）=>d）
.attr（“id”，（d，i）=>“弧”+i）
.style（“填充”（d，i）=>色标（i））
.style（“z指数”，100）
.样式（“不透明度”，0.5）
.attr（“类别”、“已选定”）
.attr（'transform'，'scale（0,0'））
.on（“鼠标悬停”，把手放在手上）
.on（“鼠标出”，把手出）
.transition（）.transition（）
.延迟（400）
.持续时间（功能（d，i）{
返回70*i
})
.attr（'transform'，'scale（1,1'））
.attr（）
.on（“点击”），功能（d，i）{
handleClick（）；
d3.选择（这个）。分类(
“选定”，
d3.选择（此）.classed（“selected”）？false:true
);
d3.选择（“图像#弧”+i）。分类(
“选定”，
d3.选择（此）.classed（“selected”）？真：假
);
handleNoClick（）；
});
您的问题是因为元素一次只能有一个属性。在本例中，您为每个路径指定了
transform=“translate（325550）”
，但随后将其替换为
transform=“scale（0，0）”

幸运的是，您可以将这些转换链接在一起：
transform=“translate（325550）scale（0，0）”
，这将按顺序应用它们。动画完成后，这将变成
transform=“translate（325550）scale（1，1）”


var h=800
var w=800
常数弧=d3.arc（）；
常量svg=d3
.选择（“径向图”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
常数handleMouseOver=（d，i，n）=>{
svg.selectAll（“path”）.transition（）.duration（300）.style（“opacity”，0.35）；
d3.选择（n[i]）.transition（）.持续时间（300）.样式（“不透明度”，0.35）；
};
常数handleMouseOut=（d，i，n）=>{
svg
.selectAll（“路径”）
.transition（）
.持续时间（300）
.style（“不透明度”，0.35）
.样式（“笔划宽度”，0）；
};
常量handleClick=（d，i，n）=>{
如果(
$（“#arc0”）.hasClass（“选定”）&&
$（“#arc1”）.hasClass（“选定”）&&
$（“#arc2”）.hasClass（“选定”）&&
$（“#arc3”）.hasClass（“选定”）&&
$（“#arc4”）.hasClass（“选定”）&&
$（“#arc5”）.hasClass（“选定”）&&
$（“#arc6”）.hasClass（“选定”）&&
$（“#arc7”）.hasClass（“选定”）&&
$（“#arc8”）.hasClass（“选定”）
) {
$（“.arc”）.removeClass（“选定”）；
$（“.image”）.removeClass（“选定”）；
}else{}
};
常量handleNoClick=（d，i，n）=>{
如果（！$（“#arc0”）。