【发布时间】：2019-04-17 03:00:13
【问题描述】：
在我自己学习并且是 D3.js 的新手时，我正在尝试创建多个饼图，其中包含通过自定义按钮切换的不同类别。
我创建了一个单独的饼图，效果如下： https://bl.ocks.org/lydiawawa/7c385eaaf24cb4e6047c9b56866fac6e/252dfbf9f27123e5577f6c54ca7dffe6fd75714e
我希望通过 tooltip 和 label 实现以下效果，但我想在性别、年龄和种族之间切换，而不是橙色和苹果：
想要的效果： http://bl.ocks.org/j0hnsmith/5591116
这是我目前所拥有的： https://blockbuilder.org/lydiawawa/38243015ab2ac96b6086d3bae56572b9
最困难的部分是将两个类别的饼图转换为三个类别并添加工具提示和标签。我想在实现效果方面有所帮助。感谢您的任何意见！
编辑
我最近发现了以下三个类别的效果，但是我不知道如何将标签或图例添加到图表中，以便以后也可以用于工具提示：
http://bl.ocks.org/jfreels/6919598
我尝试以以下格式重塑 json。也许通过这种方式我们可以使用 d3.json 代替 init()？
[
{
"genderC": "female",
"gender": 533,
"raceC": "A",
"race": 20,
"ageC": "0 < 12 years",
"age": 8
},
{
"genderC": "male",
"gender": 260,
"raceC": "A E",
"race": 19,
"ageC": "13 years",
"age": 1
},
{
"genderC": "",
"gender": null,
"raceC": "A D",
"race": 2,
"ageC": "14 years",
"age": 102
},
{
"genderC": "",
"gender": null,
"raceC": "A DE",
"race": 1,
"ageC": "15 years",
"age": 195
},
{
"genderC": "",
"gender": null,
"raceC": "A C",
"race": 5,
"ageC": "16 years",
"age": 200
},
{
"genderC": "",
"gender": null,
"raceC": "A C E",
"race": 5,
"ageC": "17 years",
"age": 187
},
{
"genderC": "",
"gender": null,
"raceC": "AB D",
"race": 1,
"ageC": "18 years",
"age": 100
},
{
"genderC": "",
"gender": null,
"raceC": "ABC E",
"race": 1,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "ABCD",
"race": 1,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "ABCDE",
"race": 1,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "B",
"race": 27,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "B H",
"race": 0,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "B E",
"race": 6,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "B D",
"race": 6,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "B DE",
"race": 2,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "BC",
"race": 2,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "BCD",
"race": 1,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "C",
"race": 175,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "C E",
"race": 17,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "CD",
"race": 3,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "D",
"race": 14,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "DE",
"race": 3,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "E",
"race": 481,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
},
{
"genderC": "",
"gender": null,
"raceC": "",
"race": null,
"ageC": "",
"age": null
}
]
【问题讨论】：
-
我正在浏览您共享的块构建器，我有点困惑您的最终数据是什么样的？在 blockbuilder 中，您的数据位于 dataset.json 中，但它只是 javascript，因为您有对象数组
var gender = [{..}],{..}]。如果您的数据已经是对象数组的形式，则不需要创建 json。将它们作为单独的变量实际上更容易。 -
@Coola 我将 json 作为脚本导入到 index.html 中，并将数组调用到 init() 中。你的意思是我不需要在 index.html 中调用它吗？我可以在 pieChart() 中定义数组吗？
-
@Coola 我想我希望做的只是使用我自己的数据集创建三个按钮切换的饼图。转换将从此示例生效：bl.ocks.org/j0hnsmith/5591116 带有标记颜色的图例或标签。也将添加工具提示效果以显示百分比。
-
是的，您可以在
main.js中定义数组。我理解您想要什么，但是从其他来源复制代码而不了解它们的作用会使您当前的代码块变得一团糟。 -
@Coola 我将这些变量移到 main.js 中的 init() 中。代码已更新。
标签： javascript json d3.js data-visualization