图例在d3.js饼图中不可见

我正在尝试将图例添加到饼图中。我可以看到添加到inspect元素中的legend元素，但我无法看到它。可能是背景颜色的原因吗？我研究了其他问题，但我无法解决这个问题

有人能解释一下我的代码有什么问题吗

我还粘贴了下面的图像，显示图例已附加到svg

下面是代码片段

条线图
//图表尺寸
var宽度=300；
var高度=300；
变量半径=数学最小值（宽度、高度）/2；
var-labelHeight=18；
风险值数据={
2011: 9,
2012: 12,
2013: 10,
2014: 8,
2015: 12,
2016: 20
}
//色标
var color=d3.scaleOrdinal（）范围（[“126608”、“049a0d”、“587b08”、“048440”、“177c0a”、“4a8d36”、“3b712b”、“4a8b00”、“426b07”、“4b940b”）；
//弧
var arc=d3.arc（）
.外层（半径-10）
.内半径（0）；
var pie=d3.pie（）
.价值（功能（d）{
返回d值；
})
var svg=d3.选择（#piechart”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
变量pie_data=pie（d3.条目（数据））
console.log（饼图数据）
//svg.selectAll（“路径”）.remove（）
var g=svg.selectAll（“路径”）
.数据（饼图数据）
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d）{
返回颜色（d.data.key）
});
g、 附加（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+弧形心（d）+”）；
})
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.attr（“填充”、“白色”）
.文本（功能（d）{
返回d.data.key
});
var legend=svg.append（“g”）
.attr（“类”、“图例”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，20）
.attr（“文本锚定”、“开始”）
.全选（“g”）
.数据（饼图数据）
.enter（）.append（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*30+”）；
});
图例。追加（“文本”）
.attr（“x”，半径+30）
.attr（“y”，9.5）
.attr（“dy”，“0.32em”）
.文本（功能（d）{
返回d.data.key；
});
图例。追加（“rect”）
.attr（“x”，半径+10）
.attr（“宽度”，19）
.attr（“高度”，19）
.attr（“填充”，功能（d）{
返回颜色（d.data.key）；
});

您只是错过了为内容设置一个适当的设置，但实际上您需要做的是实现边距：

条线图
//图表尺寸
var宽度=500；
var高度=300；
变量半径=数学最小值（宽度、高度）/2；
var-labelHeight=18；
风险值数据={
2011: 9,
2012: 12,
2013: 10,
2014: 8,
2015: 12,
2016: 20
}
//色标
var color=d3.scaleOrdinal（）范围（[“126608”、“049a0d”、“587b08”、“048440”、“177c0a”、“4a8d36”、“3b712b”、“4a8b00”、“426b07”、“4b940b”）；
//弧
var arc=d3.arc（）
.外层（半径-10）
.内半径（0）；
var pie=d3.pie（）
.价值（功能（d）{
返回d值；
})
var svg=d3.选择（#piechart”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
变量pie_data=pie（d3.条目（数据））
//svg.selectAll（“路径”）.remove（）
var g=svg.selectAll（“路径”）
.数据（饼图数据）
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d）{
返回颜色（d.data.key）
});
g、 附加（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+弧形心（d）+”）；
})
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.attr（“填充”、“白色”）
.文本（功能（d）{
返回d.data.key
});
var legend=svg.append（“g”）
.attr（“类”、“图例”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，20）
.attr（“文本锚定”、“开始”）
.全选（“g”）
.数据（饼图数据）
.enter（）.append（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*30+”）；
});
图例。追加（“文本”）
.attr（“x”，半径+30）
.attr（“y”，9.5）
.attr（“dy”，“0.32em”）
.文本（功能（d）{
返回d.data.key；
});
图例。追加（“rect”）
.attr（“x”，半径+10）
.attr（“宽度”，19）
.attr（“高度”，19）
.attr（“填充”，功能（d）{
返回颜色（d.data.key）；
});
< /代码>如果你认为我的答案有用的话请考虑：