Javascript JSON对象不返回饼图切片

我一直在研究这个示例，以了解如何在D3中编写饼图，但尽管我在模拟其数据结构时使用了这个示例，但我想尝试使用JSON数据结构，该结构更适合于我如何为可视化构建数据。当将相同的数据切换到这个新结构时，我注意到出现了黑色笔划和注释，但是切片不存在，注释标签引用了索引和对象值

我相信这是由于

.entries（）

方法将其转换为键值数据结构所致，但我很好奇这是否是可视化数据点所必需的方法，或者是否有一种更简单的方法来利用我现有的结构

工作数据结构：

var data = {
        deep: 22.37484390963787,
        light: 62.65183335225337,
        rem: 14.973322738108752
    }

var data = [
        { "label": "deep", "value": 22.37484390963787 },
        { "label": "light", "value": 62.65183335225337 },
        { "label": "rem", "value": 14.973322738108752 }
    ]

JSON数据结构：

var data = {
        deep: 22.37484390963787,
        light: 62.65183335225337,
        rem: 14.973322738108752
    }

var data = [
        { "label": "deep", "value": 22.37484390963787 },
        { "label": "light", "value": 62.65183335225337 },
        { "label": "rem", "value": 14.973322738108752 }
    ]

var数据=[
{“label”：“deep”，“value”：22.37484390963787}，
{“标签”：“光”，“值”：62.65183335225337}，
{“标签”：“rem”，“值”：14.973322738108752}
]
//风险值数据={
//深：22.374843963787，
//灯光：62.65183335225337，
//雷姆：14.973322738108752
// }
console.log（数据）
var宽度=480；
var高度=480；
var保证金=40；
变量半径=数学最小值（宽度、高度）/2-裕度；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”]）；
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）；
var data_ready=pie（d3.条目（数据））；
控制台日志（数据准备就绪）；
var arcGenerator=d3.arc（）
.内半径（0）
.外层（半径）；
svg.selectAll（'viz'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，电弧发生器）
.attr（'fill'，函数（d）{返回颜色（d.data.key）}）
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.样式（“不透明度”，0.7）；
svg.selectAll（'viz'）
.数据（数据准备就绪）
.输入（）
.append（'文本'）
.text（函数（d）{return d.data.key+'，'+d.data.value}）
.attr（“transform”，函数（d）{return”translate（“+arcGenerator.centroid（d）+”）；}）
.style（“文本锚定”、“中间”）
.style（“字体大小”，17）
您不能只更改数据格式而不更改其他内容。最简单的解决方案是将您的结构重新格式化为d3最初期望的结构：

var formatted_data = data.reduce((acc,i) => {acc[i.label] = i.value; return acc;},{});

然后将其传递给
条目
：


var数据=[
{“label”：“deep”，“value”：22.37484390963787}，
{“标签”：“光”，“值”：62.65183335225337}，
{“标签”：“rem”，“值”：14.973322738108752}
]
//风险值数据={
//深：22.374843963787，
//灯光：62.65183335225337，
//雷姆：14.973322738108752
// }
var格式化的_data=data.reduce（（acc，i）=>{acc[i.label]=i.value；返回acc；}，{}）；
console.log（格式化的_数据）
var宽度=480；
var高度=480；
var保证金=40；
变量半径=数学最小值（宽度、高度）/2-裕度；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”]）；
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）；
var data_ready=pie（d3.条目（格式化的_数据））；
控制台日志（数据准备就绪）；
var arcGenerator=d3.arc（）
.内半径（0）
.外层（半径）；
svg.selectAll（'viz'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，电弧发生器）
.attr（'fill'，函数（d）{返回颜色（d.data.key）}）
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.样式（“不透明度”，0.7）；
svg.selectAll（'viz'）
.数据（数据准备就绪）
.输入（）
.append（'文本'）
.text（函数（d）{return d.data.key+'，'+d.data.value}）
.attr（“transform”，函数（d）{return”translate（“+arcGenerator.centroid（d）+”）；}）
.style（“文本锚定”、“中间”）
.style（“字体大小”，17）
实现这一点的另一种方法是不要使用
d3.entries
并直接传递数据。在获取颜色和标签文本时，还需要进行一些其他调整（即使用
d.data.label
代替
d.data.key
）


var数据=[
{“label”：“deep”，“value”：22.37484390963787}，
{“标签”：“光”，“值”：62.65183335225337}，
{“标签”：“rem”，“值”：14.973322738108752}
]
//风险值数据={
//深：22.374843963787，
//灯光：62.65183335225337，
//雷姆：14.973322738108752
// }
console.log（数据）
var宽度=480；
var高度=480；
var保证金=40；
变量半径=数学最小值（宽度、高度）/2-裕度；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”]）；
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）；
var data_ready=pie（数据）；
控制台日志（数据准备就绪）；
var arcGenerator=d3.arc（）
.内半径（0）
.外层（半径）；
svg.selectAll（'viz'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，电弧发生器）
.attr（'fill'，函数（d）{返回颜色（d.data.label）}）
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.样式（“不透明度”，0.7）；
svg.selectAll（'viz'）
.数据_