Question

我有一个使用c3和d3创建的甜甜圈-我使用以下命令在甜甜圈的中心添加了一些文本：

label.html('');
label.insert('tspan').text('4').attr('dy', -5).attr('x', 0).attr('class','h4');
label.insert('tspan').text('remaining').attr('dy', 20).attr('x', 0).attr('class','text-size-small');

这可以正常工作，但是我希望整个标签文本都是可单击的-我可以将html添加到标签中，但是它会创建一个新链接，而不是使当前文本可单击：

label.html('');
label.insert('tspan').text('4').attr('dy', -5).attr('x', 0).attr('class','h4');
label.insert('tspan').text('remaining').attr('dy', 20).attr('x', 0).attr('class','text-size-small').html('<a href="">link</a>');

我尝试了以下操作，但此操作什么也没显示：

label.html('<a href="/">');
label.insert('tspan').text('4').attr('dy', -5).attr('x', 0).attr('class','h4');
label.insert('tspan').text('remaining').attr('dy', 20).attr('x', 0).attr('class','text-size-small').html('<a href="">link</a>');
label.html('</a>');

如何使整个标签可点击？

Answer 1

我刚刚发现这样做的方式略有不同-有一个click事件，可以如下使用：

label.html('');
label.insert('tspan').text('4').attr('dy', -5).attr('x', 0).attr('class','h4 pointer').on("click", function() { window.open("https://www.google.com")});
label.insert('tspan').text('remaining').attr('dy', 20).attr('x', 0).attr('class','text-size-small pointer').on("click", function() { window.open("https://www.google.com")});

在这种情况下，我还添加了一个称为指针的类，因此很明显文本是链接。

所需的特定部分是：

.on("click", function() { window.open("https://www.google.com")});

d3使在甜甜圈中心的文本可单击

1 个答案: