Javascript 当其他图表类型正确定位时，为什么我的油炸圈饼图表定位在容器外？

我有一堆图表，用户单击链接时会在同一个div中绘制这些图表（每次单击都会删除以前的svg，然后绘制新的svg）。除甜甜圈图表外，所有图表均按预期位于div的中心。有什么原因吗？我创建了一个JS提琴来帮助说明这一点

基本上，我有三个功能。泛型drawChart（）函数，它接受已单击按钮的索引，并包含一个选择要绘制的图表的开关语句。然后是chartTwo（），它只有两条线来说明图表是如何定位在中心的。chartOne（）是一个圆环图，位于左上角的外侧。 谢谢你的帮助

通用图表生成器函数

圆环图函数

---

饼图/甜甜圈图的中心位于

[0,0]

处，而x由具有以下端点的线组成：

.attr('x1', 0)
.attr('y1', 0)
.attr('x2', width)
.attr('y2', height)

线条从可视化的一角开始和结束，饼图/油炸圈饼图居中于该角

解决此问题的最简单方法是创建一个

g

来保存饼图，该饼图的变换与保存其余图表的

g

不同。这个新的

g

将具有

[width/2，height/2]

的转换，并将饼图的中心置于可视化的中心。参见此。

添加平移以调整

宽度和
高度可以添加到
chartOne（）
函数：

g.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

现在你可以加上边距，我想你可以完成了。请参见下面的演示：


$（函数（）{
//装载
$（'li'）.eq（0）.addClass（'active'）；
绘图图（0）；
$（'li'）。在（'click'，function（）上{
var index=$（this.index（）；
$（'li'）.removeClass（'active'）；
$（this.addClass（'active'）；
绘图（索引）；
});
});
函数绘图图（int）{
变量$chartarea=$（“#chartarea”），
ca_w=$chartarea.innerWidth（），
ca_h=$chartarea.innerHeight（）；
如果（$chartarea.find（'svg'）。长度>0）{
$chartarea.find（'svg'）.remove（）；
}
var保证金={
前20名，
右:20,，
底数：20，
左：20
};
变量宽度=ca_w-margin.left-margin.right，
高度=ca_h-margin.top-margin.bottom；
var g=d3.select（“#chartarea”）.append（'svg'））
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.append（'g'）
.style（'位置'，'相对'）
.style（'left'，'0'）
.attr（'height'，height）
.attr（'width'，width）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
交换机（int）{
案例0：
图表一（g、宽度、高度、边距）；//已编辑
打破
案例1：
图表二（g、宽度、高度）；
打破
违约：
图表一（g、宽度、高度、边距）；//已编辑
}
}
功能图二（g、宽度、高度）{
g、 追加（'行'）
.attr（'x1'，0）
.attr（'y1'，0）
.attr（'x2'，宽度）
.attr（'y2'，高度）
.attr（'笔划'，'灰色'）
.attr（'stroke-width'，'10px'）；
g、 追加（'行'）
.attr（'x1'，宽度）
.attr（'y1'，0）
.attr（'x2'，0）
.attr（'y2'，高度）
.attr（'笔划'，'灰色'）
.attr（'stroke-width'，'10px'）；
}
功能图表一（g、宽度、高度、边距）{//已编辑
//加上这个
g、 属性（“变换”、“平移”（+（宽度/2+边距.left）+）、“+（高度/2+边距.top）+”）；
风险值数据=[{
名称：“美国”，
价值：40
},
{
名称：“英国”，
价值：20
},
{
名称：“加拿大”，
价值：30
},
{
名称：“Maxico”，
数值：10
},
];
var text=“”；
var厚度=40；
变量半径=数学最小值（宽度、高度）/2；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var arc=d3.arc（）
.内半径（半径-厚度）
.外层（半径）；
var pie=d3.pie（）
.价值（功能（d）{
返回d值；
})
.sort（空）；
g、 选择全部（'路径'）
.数据（pie（数据））
.输入（）
.附加（“g”）
.on（“鼠标悬停”，功能（d）{
设g=d3。选择（此）
.style（“光标”、“指针”）
.样式（“填充”、“黑色”）
.附加（“g”）
.attr（“类”、“文本组”）；
g、 附加（“文本”）
.attr（“类”、“名称文本”）
.text（d.data.name）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'-1.2em'）；
g、 附加（“文本”）
.attr（“类”、“值文本”）
.文本（d.数据.值）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.6em'）；
})
.on（“mouseout”，函数（）{
d3.选择（本）
.style（“光标”、“无”）
.样式（“填充”，颜色（当前）
.select（“.text group”）.remove（）；
})
.append（'路径'）
.attr（'d'，弧）
.attr（'填充'，（d，i）=>颜色（i））
.on（“鼠标悬停”，函数（）{
d3.选择（本）
.style（“光标”、“指针”）
.样式（“填充”、“黑色”）；
})
.on（“mouseout”，函数（）{
d3.选择（本）
.style（“光标”、“无”）
.样式（“填充”，颜色（此._当前））；
})
.每个（功能（d，i）{
这个。_电流=i；
});
g、 追加（'文本'）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.35em'））
.文本（文本）；
}
*{
保证金：0；
填充：0；
}
#海图区{
利润率：20px；
边框：实心1px黑色；
高度：300px；
宽度：500px；
}
保险商实验室{
显示器：flex；
宽度：500px；
利润率：20px；
列表样式：无；
文本对齐：居中；
}
李{
利润率：0.20px；
填充物：5px；
边界半径：10px；
弹性：1；
背景：灰色；
光标：指针；
}
李：很活跃{
背景：#60咖啡馆
}


图表一
图二

.attr('x1', 0)
.attr('y1', 0)
.attr('x2', width)
.attr('y2', height)

g.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");