D3.js 在工具提示中带有超链接。

Question

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

我能够将超链接添加到 @FernOfTheAndes JSFiddle version of this visualisation. My hyperlinked version is here。

但是我的 more real world example 带有超链接工具提示的散点图不起作用。看起来 hrefs 被正确地添加到 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);
    }

工作代码here

希望对您有所帮助！

D3.js 在工具提示中带有超链接。

D3.js with hyperlinks in tooltips.

visualization

d3.js