D3js v5 сгруппированные данные гистограммы x.domain метки и данные разделены

У меня есть данные в следующем формате, которые поступают как переменная.

var groupeddata = 
  [{ Title: "Dummy Data", ID: "46", RFU: 20291, Name: "Name1", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data", ID: "50", RFU: 15000, Name: "Name2", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data", ID: "40", RFU: 14000, Name: "Name3", barcolor: "#ff7f00"}, 
  {Title: "Dummy Data2", ID: "46", RFU: 21000, Name: "Name1", barcolor: "#8B008B"}, 
  {Title: "Dummy Data2", ID: "50", RFU: 18095, Name: "Name2", barcolor: "#8B008B"}, 
  {Title: "Dummy Data2", ID: "56", RFU: 27278, Name: "Name3", barcolor: "#8B008B"}];

Мне удалось создать сгруппированную гистограмму, если данные сгруппированы по идентификатору с помощью функции d3.nest, как я обсуждал в предыдущей задаче: https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469

Однако, если есть две полосы с одинаковыми значениями свойства «Имя» и разными идентификаторами, как в приведенном выше случае, они появляются далеко. Например, Name3 показывает полосу с идентификатором 40 (строка 3 данных) и идентификатором 56 (строка 6 данных) (https://bl.ocks.org/Coola85/86391f03bab40b16bdc24f1eedfba35f/). Кроме того, было бы хорошо, если бы метки деления оси X также были простыми числами 1, 2, 3 вместо номеров идентификаторов. Я не хочу, чтобы имена появлялись на метках галочки оси x, так как имена будут слишком длинными, чтобы поместиться в фактический набор данных.

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

Обновление 1 Чтобы уточнить, вот изображение того, как я хочу, чтобы он выглядел: Идеальный выход. Обратите внимание: текст и пунктирные стрелки предназначены только для ссылка и нежелательна в конечном результате.

Не могли бы вы изобразить, как вы хотите, чтобы это выглядело? Я нахожу этот вопрос немного запутанным в данный момент ...

Ian 01.05.2018 20:37

Приносим извинения за путаницу и благодарим Йена за ответ. Я обновил пост, добавив в него изображение, чтобы вы могли увидеть, что я хочу получить в результате. Также обратите внимание, что отметки по оси X - это только 1, 2 и 3, а не имена. Если я вкладываюсь по именам, а затем сортирую и представляю данные, имена появляются на метках по оси X, что нежелательно, поскольку имена в окончательных данных длинные.

Coola 01.05.2018 20:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
648
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, вы почти у цели - просто ваш d3.nest некорректен. Ваша группировка на ID на данный момент, но глядя на ожидаемый результат, который нигде не нужен.

Измените группировку, чтобы использовать Name:

var databyID = d3.nest()
    .key(function(d) { return d.Name; })
    .entries(groupeddata);

Это произвело следующее, что, я думаю, именно то, что вы хотите

Спасибо, Ян. Да. Я дошел до этого, заменив d.ID на d.Name. Я могу производить то, что есть у вас. Однако я не хочу, чтобы метки ниже были Name1, Name2, Name3. Вместо этого я хочу, чтобы они были либо идентификаторами, либо просто общими 1, 2, 3.

Coola 01.05.2018 21:40

Чтобы заменить их, вам понадобится какая-то форма поиска между '1' ==> 'Name1' и т. д. Можете ли вы просто изменить форму данных с самого начала? Это будет самый простой способ

Ian 01.05.2018 21:57

После сортировки данных я могу клонировать databyID, а затем заменить ключи, сохранив порядок? Затем отправьте новый массив с 1 2 3 в диаграмму d3js? Возможно ли это, или моя логика в чем-то ошибочна? Новичок в javascript не уверен, какую точную функцию мне нужно использовать для выборочной замены всех ключей. Примечание. В окончательном наборе данных не будет «Имя», в нем будет что-то совершенно случайное.

Coola 01.05.2018 22:03

Другие вопросы по теме