D3.js，工具提示中有超链接

Question

我遵循了《数据可视化》一书中的工具提示示例，并希望创建一个利用工具提示中超链接内容的d3.js图。

我能够在@FernOfTheAndes JSFiddle版本中添加超链接。我的超链接版本在这里。

但我的更多现实世界中的例子的散点图与超链接的工具提示不起作用。看起来href被正确地添加到DOM中，但有些东西阻止了链接的选择。

这就是光标悬停在散点图中的一个点上后我的工具提示的样子：

<div id="tooltip_svg_01" style="opacity: 1; left: 532.874px; top: 168px;">
  <p><strong>Important Label Heading</strong></p>
  <p><span id="value_tt_01">0.11318094,79</span></p>
  <p><a id="link_tt_01" href="https://en.wikipedia.org/wiki/2">0.11318094,79</a></p>
</div>                                                                                                                                                                                                           

是否有某种事件处理正在捕获我丢失的url上的click？

Answer 1

原因在于样式：

这一行是不允许鼠标事件的问题。

pointer-events: none; 

您的代码：

    #tooltip_svg_01 {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none; //this line is the problem
    }

工作代码：

    #tooltip_svg_01 {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    }

此处的工作代码

希望这能有所帮助！