如何让D3.js实现的JavaScript抽奖转盘停止后展示可点击跳转链接

问题原因 #

1. 你使用了d3.text()方法渲染结果内容，该方法会将HTML标签直接作为纯文本输出，不会解析为可点击的超链接
2. 原有data数组中a标签的引号转义存在语法错误，同时全局CSS设置了text {pointer-events: none;}会拦截所有文本的点击事件

修改方案 #

1. 修正data数组的字段格式

调整需要跳转的question字段的引号转义，示例如下：

var data = [
    {"label":"2 Songs",  "value":1,  "question":"<a href=\"https://www.peredy1.com\" target=\"_blank\">CLICK HERE</a>"},
    // 其余需要跳转的条目按照上面的格式修改即可
    {"label":"1 Song",  "value":1,  "question":"CLICK HERE"},
    {"label":"2 Songs",  "value":1,  "question":"CLICK HERE"},
    {"label":"1 Song",  "value":1,  "question":"CLICK HERE"},
    {"label":"1 Song",  "value":1,  "question":"CLICK HERE"},
    {"label":"1 Song",  "value":1,  "question":"CLICK HERE"},
    {"label":"3 Songs",  "value":1,  "question":"CLICK HERE"},
    {"label":"1 Song",  "value":1,  "question":"CLICK HERE"},
    {"label":"2 Songs",  "value":1,  "question":"CLICK HERE"},
    {"label":"1 Song", "value":1, "question":"CLICK HERE"}         
];

2. 修改结果渲染逻辑

找到转盘停止后的回调逻辑，把text()方法替换为html()方法：

// 原来的代码
// d3.select("#question h1").text(data[picked].question);
// 修改为
d3.select("#question h1").html(data[picked].question);

3. 补充CSS修复点击权限

在CSS代码末尾新增如下规则，保证超链接可正常点击：

#question h1 a {
  color: #2563eb;
  text-decoration: underline;
  pointer-events: all;
  cursor: pointer;
}

完成以上三处修改后，转盘停止后展示的CLICK HERE就可以正常点击跳转了。

内容的提问来源于stack exchange，提问作者Peredy