鼠标悬停时更新第二张图表

Question

我试图用trulia's graph复制D3.js，但只复制主图表（热图）和每日图表（当您将鼠标悬停在图表栏上时，图表栏会发生变化主图上的特定点）。

使用this example，我设法使用自己的数据构建主图表。我也有第二张图表。但是当我将鼠标悬停在主图表上的一个点上时，我现在不知道如何更新第二个图表。

Answer 1

基本上，您将拥有的是具有不同数据的两个不同图表。第一个图表（热图）控制另一个图表。热图上的每个数据点都有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);
});