Question

我已按照数据可视化工具书中的工具提示示例here进行操作，并希望创建一个d3.js图表，该图表在其工具提示中使用了超链接内容。

我能够向此可视化的@FernOfTheAndes JSFiddle version添加超链接。我的超链接版本是here。

但我的更多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>

是否有某种事件处理正在捕获我遗漏的网址上的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在工具提示中有超链接。

1 个答案: