Мне нужно пройти тест истории продаж, который прошла компания, в которой я работаю. Там, где они уже получают данные о продажах через power bi, и мне нужно сделать то же самое, но в D3.
Вот изображение графика и таблиц на данный момент:
Это изображение показывает график и две таблицы, все три из которых имеют прямое отношение.
На графике стоимость продаж отображается в соответствии с позицией (строкой) ), который выбран в таблице. Начальным значением по умолчанию является строка Итого.
Я объясню одну за другой, поэтому я могу лучше express.
В таблице Sales by Branch
у нас есть несколько строк. Если я нажму, например, в ветке 12 строки. График изменяется путем рендеринга только значений, относящихся к ветви 12. И таблица Product Sales
также изменяется, при этом отображаются только продукты, которые были проданы в ветви 12, а также отображаются значения в соответствии с веткой (12), которая была selected.
Как вы можете видеть на рисунке ниже, пример того, как выглядят таблицы и график, когда я выбираю Branch 12 (сначала график выглядит очень похоже на график на первом изображении, но обратите внимание, что ось Y меняет свое значение):
Тот же лог c также работает для таблицы Product Sales
. Если я нажму на строку Product 1
, например. График изменяется путем отображения только значений, относящихся к продукту 1. И таблица Sales by Branch
также изменяется, отображая только ветви, которые сравнивают продукт 1, а также отображая значения в соответствии с выбранным продуктом.
Как вы можете видеть на рисунке ниже, пример того, как выглядят таблицы и графики, когда я выбираю Продукт 1:
График также имеет аналогичное взаимодействие. Когда я наводю на него курсор, создается линия на его оси Y. Эта строка позволяет мне нажать на нее. Когда я нажимаю, таблицы обновляются. Например, если я щелкну строку под июньским месяцем, в таблицах Sales by Branch
и Sales by Product
отображаются только значения, соответствующие июньскому месяцу.
В любом случае, это была проблема, которую я был дан, и я был на этом по крайней мере три месяца. Я ничего не знал о D3. js.
Мне удалось выполнить некоторые части или другую задачу, но я не мог связать графики с таблицами.
Во время обучения я недавно обнаружил D C. js и Crossfilter, и я подумал, что смогу закончить sh, но я застрял и не знаю, смогу ли я сделать все это только с D C. js и Crossfilter.
Причина, по которой вы задаете этот вопрос здесь в стеке, заключается в том, чтобы узнать, можете ли вы посоветовать мне лучший способ выполнить этот тест? Создать две таблицы и график и сделать всех динамичными c?
Как я уже говорил, я работаю над этим не менее 3 месяцев, и я очень растерялся.
Я надеюсь Мне удалось объяснить, каким должно быть поведение и взаимодействие между таблицами и графиком. По любым вопросам, которые мне доступны.
Вот база данных json, которую я использую для моделирования этих тестов: https://gist.githubusercontent.com/bernalvinicius/3cece295bc37de1697e7f83418e7fcc9/raw/a5820379ec6eae76ee792495cc5dd1685c977a73/vendedores.json