d3js Переключение между несколькими графиками - PullRequest
Новая
       7

d3js Переключение между несколькими графиками

0 голосов
/ 17 апреля 2019

Самостоятельно изучая и будучи совершенно новым для 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
 }
]

1 Ответ

1 голос
/ 17 апреля 2019

Было несколько проблем с вашим кодом, и мне пришлось внести несколько изменений.

Если я правильно понимаю, основная идея для вас состояла в том, чтобы перерисовать круговые диаграммы в зависимости от того, на какие данные нажимает пользователь, например, «Пол», «Возраст» или «Гонка».

  1. Данные для каждого из них очень разные, т.е. разные пары ключ-значение объекта.Я сделал все ключи count одинаковыми (в наборе данных возраста они были Count).

  2. Поскольку данные сильно отличаются, примеры, которые вы показываете, где данные обновляются, могутне применимо здесь, поскольку данные не преобразуются в этом случае.Вместо этого я просто очистил div и перерисовал круговую диаграмму.Поэтому первое, что он делает, это очищает область диаграммы, а затем начинает рисовать.Это значительно уменьшает объем необходимого кода (ваш main.js => 300 строк, тогда как мои 138 строк)

  3. Я улучшил всплывающую подсказку по мере изменения ключей данных, так что это необходимо учитыватьво всплывающей подсказке.

  4. Я переместил ваши данные в отдельный файл js, чтобы не загромождать main.js.Я просто вызываю его перед main.js в файле index.html.

  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, анимация немного запинается.Также обратите внимание, что ваши метки перекрываются, когда у вас есть дуги очень близко друг к другу.Поэтому я бы предложил удалить ярлыки.

...