Question

请提供建议如果在理解问题时遇到任何困难。所以，我可以编辑问题并提供所需的信息。

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

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

以下是我迄今为止工作的jsfiddle。

＆＃13;

                            $(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')

                                                        });
                                                });

＆＃13;

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时应该可以直接订阅该事件，但我无法绕过它。

Answer 2

This answer 对我的一个非常相似的问题帮了我很多次。它有一个工作代码示例，所以也许你可以得到一些想法继续下去。干杯

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

2 个答案: