问题
I need to complete a sales history test that the company where I work passed me. Where they already get sales data through power bi, and I need to do the same thing but in D3.
Here is the image of the graph and tables at the moment:
This image shows a graph and two tables, all three of which are directly related.
In the graph, the sales value is rendered according to the item (line) that is selected in the table. The default Initial value is the Total line.
I'll explain one by one, so I can express myself better.
In the table Sales by Branch we have several lines. If I click, for example, in the Branch 12 line. The graph is changed by rendering only the values that are related to Branch 12. And the Product Sales table is also changed, rendering only the products that were sold in Branch 12 and also rendering the values according to the Branch (12) that was selected.
As you can see in the image below, an example of what the tables and the graph look like when I select Branch 12 (at first the graph looks very similar to the graph in the first image, but note that the Y Axis changes its value):
The same logic also works for the Product Sales table. If I click on the Product 1 line for example. The graph is changed by rendering only the values that are related to Product 1. And the Sales by Branch table is also changed, rendering only the branches that compare Product 1 and also rendering the values according to the Product that was selected.
As you can see in the image below, an example of what the tables and graph look like when I select Product 1:
The graph also has a similar interaction. When I hover over it, a line is created on its Y Axis. This line allows me to click on it. When I click the tables are updated. For example, if I click on the row under the month of June, the tables Sales by Branch andSales by Product render only the values that are corresponding to the month of June.
Anyway, that was the challenge I was given and I've been at it for at least three months. I didn't know anything about D3.js.
I managed to do some parts or the other of the challenge, but I couldn't connect the graphs with the tables.
Studying I recently discovered DC.js and Crossfilter and I thought I would be able to finish, but I'm stuck and I don't know if I can actually do all of this only with DC.js and Crossfilter.
The reason for asking this question here on the stackoverflow is to know if you can advise me on the best way to do this test? To Create the two tables and the graph and make everyone dynamic?
As I said I have been working on this for at least 3 months and I am very lost.
I hope I was able to explain what the behavior and interactions between the tables and the graph should be. For any questions I am available.
Here is the json database I am using to simulate these tests: https://gist.githubusercontent.com/bernalvinicius/3cece295bc37de1697e7f83418e7fcc9/raw/a5820379ec6eae76ee792495cc5dd1685c977a73/vendedores.json
来源：https://stackoverflow.com/questions/59952879/how-to-create-graph-with-two-tables-being-all-dynamic