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

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

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

每一个的数据都非常不同，即不同的对象键值对。我将所有count键设为相同（在年龄数据集中为Count）。
由于数据差异很大，因此显示的数据更新示例在此处可能不适用，因为在这种情况下数据不会转换。相反，我采取的方法是清除div并重新绘制饼图。因此，它要做的第一件事是清除图表区域，然后开始绘制。这大大减少了所需的代码量（您的main.js => 300行，而我的是138行）
随着数据键的更改，我改进了工具提示，因此需要在工具提示中加以说明。
我将您的数据移动到了一个单独的js文件中，以免使main.js变得混乱。我只是确保在index.html文件中的main.js之前调用它。
我更新了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，因此动画有点断断续续。另请注意，当圆弧彼此非常靠近时，标签会重叠。因此，我建议删除标签。

d3js在多个图表之间切换

1 个答案: