时间戳

首页 > 解决方案 > d3js在多个图表之间切换

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

问题描述

在我自己学习并且对 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
 }
]

标签： javascriptjsond3.jsdata-visualization

解决方案

您的代码有几个问题，我不得不进行一些更改。

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

  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和raceare有很多数据点0，因此动画会有些卡顿。另请注意，当您的弧彼此非常接近时，您的标签会重叠。因此，我建议删除标签。

推荐阅读