javascript - d3js 在多个图表之间切换

Question

在自学并且对 D3.js 是全新的时候，我正在尝试创建多个饼图，其中通过自定义按钮切换不同的类别。

我创建了一个单独的饼图，效果如下: https://bl.ocks.org/lydiawawa/7c385eaaf24cb4e6047c9b56866fac6e/252dfbf9f27123e5577f6c54ca7dffe6fd75714e

我希望通过工具提示和标签实现以下效果，但我想在性别、年龄和种族之间切换，而不是橙色和苹果:

想要的效果: http://bl.ocks.org/j0hnsmith/5591116

这是我到目前为止所拥有的: https://blockbuilder.org/lydiawawa/38243015ab2ac96b6086d3bae56572b9

最困难的部分是将两个类别饼图转换为三个类别，并添加工具提示和标签。我想为实现效果提供一些帮助。感谢您的任何意见!

编辑

我最近发现了以下三个类别的效果，但我不知道如何将标签或图例添加到图形中，以便以后也可以用于工具提示:

http://bl.ocks.org/jfreels/6919598

我尝试按照以下格式 reshape 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
 }
]

Answer 1

您的代码存在几个问题，我必须进行一些更改。

如果我理解正确的话，您的主要想法是根据用户点击的数据(即“性别”“年龄”或“种族”)重新绘制饼图。

1. 其中每一个的数据都非常不同，即不同的对象键值对。我将所有 count 键设置为相同(在年龄数据集中它们是 Count)。

2. 由于数据非常不同，您显示的数据更新示例可能不适用于此处，因为在这种情况下数据不会转换。相反，我采取的方法是清除 div 并重新绘制饼图。因此它所做的第一件事就是清除图表区域，然后开始绘制。这显着减少了所需的代码量(您的 main.js = >300 行，而我的为 138 行)

3. 当您的数据键发生变化时，我改进了工具提示，因此需要在工具提示中考虑到这一点。

4. 我将您的数据移至单独的 js 文件中，以免弄乱 main.js。我只是确保在 index.html 文件中的 main.js 之前调用它。

5. 我更新了 function color(d) 函数，以根据数据键从对象数组中选取颜色。您可以根据需要扩展该阵列。如果您想使用一定范围内的颜色，可以使用 var color = d3.scale.category20(); 并使用数据索引调用颜色，如 .attr("fill", function (d, i) { return color(i);}) 如本例所示 http://bl.ocks.org/j0hnsmith/5591116

这是一个工作 block https://bl.ocks.org/akulmehta/923f277f8a10d0c35b77f6e3a84929bf/

请注意，由于 age 和 race 的许多数据点都是 0，因此动画会有点卡顿。另请注意，当弧彼此非常接近时，标签会重叠。因此我建议删除标签。