d3使甜甜圈中心的文字可点击

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

我只是想出一个稍微不同的方式 - 有一个点击事件可以使用如下：

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")});   

在这个例子中，我还添加了一个名为pointer的类，因此很明显文本是一个链接。

需要的具体部分是：

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