D3.js 如何创建两个表都是动态的图形？

我需要完成一个销售历史测试，我工作的公司通过了测试。他们已经通过power bi获得了销售数据，我需要做同样的事情，但在D3中

以下是当前图形和表格的图像：

此图显示了一个图表和两个表，这三个表都是直接相关的

在图中，销售值根据表中选择的项目（行）呈现。默认初始值为总行

我会一个一个地解释，这样我可以更好地表达自己

在表

分公司销售额
中，我们有几行。例如，如果我在Branch 12行中单击。通过仅呈现与分支12相关的值来更改图形。并且
产品销售
表也会更改，仅呈现在分支12中销售的产品，并根据所选分支（12）呈现值

正如您在下图中所看到的，当我选择Branch 12时，表格和图表的外观示例（起初，图表看起来与第一张图片中的图表非常相似，但请注意，Y轴的值发生了变化）：


同样的逻辑也适用于
产品销售
表。例如，如果我点击
产品1
行。通过仅呈现与产品1相关的值来更改图形。同时，
Sales by Branch
表也会更改，仅呈现比较产品1的分支，并根据所选产品呈现值

如下图所示，当我选择产品1时，表格和图表是什么样子的示例：


该图也有类似的交互作用。当我将鼠标悬停在其上时，将在其Y轴上创建一条线。这一行允许我点击它。当我单击时，表将被更新。例如，如果我单击6月份下的行，则表
Sales by Branch
和
Sales by Product
仅呈现与6月份对应的值

不管怎么说，这就是我所面临的挑战，我至少已经做了三个月了。我对D3.js一无所知

我设法完成了挑战的某些部分，但无法将图表与表格联系起来

我最近在研究中发现了DC.js和Crossfilter，我想我能完成，但我被卡住了，我不知道我是否真的能用DC.js和Crossfilter完成所有这些

在stackoverflow上问这个问题的原因是想知道您是否可以建议我做这个测试的最佳方法？要创建两个表和图形并使每个人都动态

正如我所说，我已经为此工作了至少3个月，我感到非常失落

我希望我能够解释表和图之间的行为和交互应该是什么。任何问题我都可以回答

下面是我用来模拟这些测试的json数据库：
当然，这是dc.js做得很好的事情。你能澄清一下你遇到的问题是什么吗？数据表没有内置过滤功能，但这就是我们之前讨论的问题。我对一个我一直试图解决的问题提出了一个新问题。当然，dc.js在这方面做得非常好。你能澄清一下你遇到的问题是什么吗？数据表没有内置过滤功能，但这就是我们之前讨论的问题。我对一个我一直试图解决的问题提出了一个新问题。蒂纳克斯