使用 D3 将鼠标悬停在单个图表上时，多个图表上的鼠标悬停线

Question

如果理解问题有任何困难，请指教。这样，我就可以编辑问题并提供所需的信息。

当我将鼠标悬停在单个图表上时，我想在多个图表上显示线条和工具提示。

在下面的图表中，我能够在单个图表上获得线条，我希望线条应该一直持续到 X 轴，并且还希望在多个图表上突出显示值的工具提示。

下面是我工作至今的jsfiddle。

                            $(window).load(function () {
                                                   var textareas$ = $('#chartarea g');
                                                        textareas$.hide();
                        
                        $('input[name="Air"]').change(function () {
                                                    var elem$ = $(this);
                                                    var correspelem$ = textareas$.eq(elem$.val() - 1);
                                                        
                                                        if (elem$.val() == 1) {
                                                                                select('Retail', "#Retail");
                                                                } else if (elem$.val() == 2) {
                                                                                select("Gas", "#Gas");
                                                                } else if (elem$.val() == 3) {
                                                                                select("Dining", "#Dining");
                                                                } else {};
                                                                if (elem$.is(':checked')) correspelem$.show();
                                                                else correspelem$.hide();

                                                               var lastSelectedChartIndex;
                var chartAxis = document.querySelectorAll('#chartarea  .axis.x');
                
                var selectedCharts = document.querySelectorAll('#options input').forEach((elem, index) => {
                if (elem.checked) {
                	lastSelectedChartIndex = index;
                }
                });
                
                //console.log(lastSelectedChartIndex)
                
                chartAxis
                	.forEach((elem, index) => (index !== chartAxis.length - 1) && !(index == lastSelectedChartIndex) ? elem.style.display = 'none' : elem.style.display = 'block')

                                                        });
                                                });

Answer 1

我更新了你jsfiddle 让你有一些工作。我使用了 VSCode 并重新缩进了代码，希望对你没问题。我所做的是：

• 在图表中创建事件调度器
• 在调度程序事件上创建回调
• 选择所有行
• 设置他们的位置

回调如下所示：

chart.onHover(function (x) {
    console.log(x);
    d3.selectAll('.hover-line')
        .select('line')
        .attr('x1', x)
        .attr('x2', x)
        .style('opacity', 1)
})

这可行，但我不喜欢每次都重新选择所有内容的事实。调用chart的时候直接订阅事件应该是可以的，但是我就是摸不着头脑。