Javascript 在鼠标悬停时更新第二个图表

我正在尝试复制，但只复制主图表（热图）和每日图表（将鼠标悬停在主图表上的特定点上时会发生变化的图形栏）

---

使用，我用自己的数据构建了主图表。我还有第二张图表。但现在，当我在主图表上的某个点上悬停时，我不知道如何更新第二个图表。

基本上，你将得到两个数据不同的图表。第一个图表（热图）控制另一个图表。热图上的每个数据点都有一个

day

和一个

hour

属性，我们想用它来控制第二个图表。要做到这一点，我们可以使用两个函数来控制第二个图形，然后每次有人单击一个点时调用这两个函数

第一个函数只需要为目标日期构建一个空白图表

function updateGraphDay(newDay){
    //Remove current graph and build graph for newDay
}

第二个是在条形图上突出显示某个小时的。我在这里假设您的条形图是在它自己的SVG中，

barGraphSVG

，并且所有的条形图都有类

hourBar

，并且您用来创建它的数据有一个

hour

属性，就像热图数据一样

function updateGraphHour(newHour){
    barGraphSVG.selectAll('.hourBar')
        .classed('selectedBar', function(d){ return d.hour === newHour });
}

现在，当您将鼠标悬停在条形图中的一个

rect

元素上时，只需调用这两个元素

heatMap.on('hover', function(d){
    updateGraphDay(d.day);
    updateGraphHour(d.hour);
});

---

你可能想看看d3.dispatch，一个例子可以在网站上找到。或者只需将选择添加到原始功能（模块化程度较低的方法）。