Arrays d3js从多维数组获取数据

我正在制作d3js甜甜圈图表，并试图从多维数组中输入数据：

topHoldersArray的输出：

{
"1":{"address":"0xd35a2d8c651f3eba4f0a044db961b5b0ccf68a2d","amount":"309953166.54621424","percent":"30.9953%"},
"2":{"address":"0xe17c20292b2f1b0ff887dc32a73c259fae25f03b","amount":"200000001","percent":"20.0000%"},
"3":{"address":"0x0000000000000000000000000000000000000000","amount":"129336426","percent":"12.9336%"}
}

使用此数组，我得到错误：

Uncaught TypeError: Cannot read property 'startAngle' of undefined

如何将此数组输入到图形中？问题似乎在于它是一个多维数组，但我不确定如何访问数据点

下面是一个片段来说明问题：

var topHoldersArray=[
{
“1”：{“地址”：“0xd35a2d8c651f3eba4f0a044db961b5b0ccf68a2d”，“金额”：“30995316”，“百分比”：“30.9953%”，
“2”：{“地址”：“0xe17c20292b2f1b0ff887dc32a73c259fae25f03b”，“金额”：“20000001”，“百分比”：“20.0000%”，
“3:{“地址”：“0x0000000000000000000000000000000000”，“金额”：“129336426”，“百分比”：“12.9336%”
}
];
var数据=topHoldersArray；
var text=“”；
var宽度=260；
var高度=260；
var厚度=40；
var持续时间=750；
变量半径=数学最小值（宽度、高度）/2；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var svg=d3。选择（“topHoldersChart”）
.append（'svg'）
.attr（'class'，'pie'）
.attr（'width'，width）
.attr（'高度'），高度；
var g=svg.append（'g'）
.attr（'transform'、'translate（+（宽度/2）+'、'+（高度/2）+'）；
var arc=d3.arc（）
.内半径（半径-厚度）
.外层（半径）；
var pie=d3.pie（）
.value（函数（d）{返回d.amount；}）
.sort（空）；
var path=g.selectAll（'path'））
.数据（pie（数据））
.输入（）
.附加（“g”）
.on（“鼠标悬停”，功能（d）{
设g=d3。选择（此）
.style（“光标”、“指针”）
.样式（“填充”、“黑色”）
.附加（“g”）
.attr（“类”、“文本组”）；
g、 附加（“文本”）
.attr（“类”、“名称文本”）
.text（`${d.data.address}`）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'-1.2em'）；
g、 附加（“文本”）
.attr（“类”、“值文本”）
.text（`${d.data.amount}`）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.6em'）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.style（“光标”、“无”）
.样式（“填充”，颜色（当前）
.select（“.text group”）.remove（）；
})
.append（'路径'）
.attr（'d'，弧）
.attr（'填充'，（d，i）=>颜色（i））
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.style（“光标”、“指针”）
.样式（“填充”、“黑色”）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.style（“光标”、“无”）
.样式（“填充”，颜色（此._当前））；
})
.each（函数（d，i）{this.\u current=i；}）；
g、 追加（'文本'）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.35em'））
.text（text）；

.pie{
利润率：20px；
}
.饼图文本{
字体系列：“Verdana”；
填充：#888；
}
.pie.name文本{
字号：1em；
}
.pie.value文本{
字号：3em；
}

顶级持有者

让我们看看您的d3.pie布局：

var pie = d3.pie()
.value(function(d) { return d.amount; })
.sort(null);

当我们将数据馈送到此（

pie（data）

）时，pie需要一个数组。但您提供的是一个对象：

{
"1":{"address":"0xd35a2d8c651f3eba4f0a044db961b5b0ccf68a2d","amount":"309953166.54621424","percent":"30.9953%"},
"2":{"address":"0xe17c20292b2f1b0ff887dc32a73c259fae25f03b","amount":"200000001","percent":"20.0000%"},
"3":{"address":"0x0000000000000000000000000000000000000000","amount":"129336426","percent":"12.9336%"}
}

我们需要将其转换为一个数组，以将其馈送到

d3.pie（）

。为此，我们可以使用

d3.entries（）

（尽管也有其他方法实现）

d3.entries（）

接受一个对象，比如：

{ a: value1, b: value2 }

并将其转换为数组：

[ { key: "a", value: value1 }, {key: "b", value: value2 } ]

这些值现在位于名为

value

的属性中。这要求我们在

d.value.amount

中查找金额。例如：

var topHoldersArray=
{
“1”：{“地址”：“0xd35a2d8c651f3eba4f0a044db961b5b0ccf68a2d”，“金额”：“30995316”，“百分比”：“30.9953%”，
“2”：{“地址”：“0xe17c20292b2f1b0ff887dc32a73c259fae25f03b”，“金额”：“20000001”，“百分比”：“20.0000%”，
“3:{“地址”：“0x0000000000000000000000000000000000”，“金额”：“129336426”，“百分比”：“12.9336%”
};
var数据=d3.条目（topHoldersArray）；
var text=“”；
var宽度=260；
var高度=260；
var厚度=40；
var持续时间=750；
变量半径=数学最小值（宽度、高度）/2；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var svg=d3。选择（“topHoldersChart”）
.append（'svg'）
.attr（'class'，'pie'）
.attr（'width'，width）
.attr（'高度'），高度；
var g=svg.append（'g'）
.attr（'transform'、'translate（+（宽度/2）+'、'+（高度/2）+'）；
var arc=d3.arc（）
.内半径（半径-厚度）
.外层（半径）；
var pie=d3.pie（）
.value（函数（d）{返回d.value.amount；}）
.sort（空）；
var path=g.selectAll（'path'））
.数据（pie（数据））
.输入（）
.附加（“g”）
.on（“鼠标悬停”，功能（d）{
设g=d3。选择（此）
.style（“光标”、“指针”）
.样式（“填充”、“黑色”）
.附加（“g”）
.attr（“类”、“文本组”）；
g、 附加（“文本”）
.attr（“类”、“名称文本”）
.text（`${d.data.value.address}`）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'-1.2em'））
g、 附加（“文本”）
.attr（“类”、“值文本”）
.text（`${d.data.value.amount}`）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.6em'））
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.style（“光标”、“无”）
.样式（“填充”，颜色（当前）
.select（“.text group”）.remove（）；
})
.append（'路径'）
.attr（'d'，弧）
.attr（'填充'，（d，i）=>颜色（i））
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.style（“光标”、“指针”）
.样式（“填充”、“黑色”）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.style（“光标”、“无”）
.样式（“填充”，颜色（此._当前））；
})
.each（函数（d，i）{this.\u current=i；}）；
g、 追加（'文本'）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.35em'））
.text（text）；

.pie{
利润率：20px；
}
.饼图文本{
字体系列：“Verdana”；
填充：#888；
}
.pie.name文本{
字号：1em；
}
.pie.value文本{
字号：3em；
}

顶级持有者

谢谢你的回答。我试过了，但图形没有填充。我更新了OP以显示topHoldersArray的输出。是否相同