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

我试图以以下格式重塑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

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

请注意，由于age和race的许多数据点均为0 ，因此动画会有点断断续续。 另请注意，当圆弧彼此非常靠近时，标签会重叠。 因此，我建议删除标签。