d3js在多个图表之间切换 [英] d3js Switching between multiple charts

问题描述

在我自己学习并且是D3.js的新手时，我正在尝试创建多个饼图，这些饼图通过自定义按钮来切换不同的类别.

While learning on my own and being brand new to D3.js, I'm trying to create multiple pie charts with different categories switched by custom buttons.

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

I created an individual pie chart with effect: https://bl.ocks.org/lydiawawa/7c385eaaf24cb4e6047c9b56866fac6e/252dfbf9f27123e5577f6c54ca7dffe6fd75714e

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

I hope to achieve the following effect with tooltip and label, but instead of orange and apple I would like to switch in between gender, age, and race:

所需效果: http://bl.ocks.org/j0hnsmith/5591116

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

This is what I have so far: https://blockbuilder.org/lydiawawa/38243015ab2ac96b6086d3bae56572b9

最困难的部分是将两个类别的饼图转换为三个类别，并添加了工具提示和标签.我想对实现效果有所帮助.谢谢您的投入！

The most difficult part is converting the two category pie chart to three categories with tooltip and label added. I would like to have some help in achieving the effect. Thank you for any input!

修改

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

I found the following effect with three categories recently, but I do not know how to add the label or legend to the graph that can be later used for tooltip as well:

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

我试图以以下格式重塑json.也许通过这种方式，我们可以使用d3.json代替init()?

I have tried to reshape json in the following format. Maybe in this way we can use d3.json instead of 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
 }
]

推荐答案

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

There were several issues with your code and I had to make several changes.

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

If I understand correctly the main idea for you was to redraw the pie charts depending on what data the user clicks on i.e. "Gender" "Age" or "Race".

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

1. The data for each of these is very different, i.e. different object key-value pairs. I made all the count keys the same (in the age dataset they were Count).

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

Since the data is very different the examples you show where the data gets updated may not apply here as the data does not transform in this case. Instead the approach I took was to just clear the div and redraw a pie chart. So the first thing it does is to clear the chart area and then begins drawing. This significantly reduces the amount of code needed (your main.js = >300 lines, whereas mine 138 lines)

随着您数据键的更改，我改进了工具提示，因此需要在工具提示中加以说明.

I improved the tooltip as your data keys change so this needs to be accounted for in the tooltip.

我将您的数据移动到了一个单独的js文件中，以免使main.js变得混乱.我只是确保在index.html文件中的main.js之前调用它.

I moved your data to a separate js file to not clutter the main.js. I just make sure to call that before the main.js in the index.html file.

我更新了function color(d)函数，以基于数据键从对象数组中选择颜色.您可以根据需要扩展阵列.如果要使用某个范围内的颜色，则可以使用var color = d3.scale.category20();并使用像.attr("fill", function (d, i) { return color(i);})这样的数据的索引来调用颜色，如本示例所示

I updated the function color(d) function to pick the colors from an array of objects based on the data keys. You can expand the array to your needs. If you want to use colors within a range you can use var color = d3.scale.category20(); and call the color using the index of the data like .attr("fill", function (d, i) { return color(i);}) as shown in this example http://bl.ocks.org/j0hnsmith/5591116

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

Here is a working block https://bl.ocks.org/akulmehta/923f277f8a10d0c35b77f6e3a84929bf/

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

Note that since a lot of data points for age and race are 0, the animation stutters a bit. Also note that your labels are overlapping when you have arcs very close to each other. Hence I would suggest removing the labels.

这篇关于d3js在多个图表之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！