此 NVD3 示例中的超链接答案

【问题标题】：Hyperlinks in this NVD3 example此 NVD3 示例中的超链接
【发布时间】：2015-06-24 00:38:45
【问题描述】：

我想让每个小数据（圆圈）成为可点击的链接。我的真正意图是让每个数据点都有一个模态窗口弹出窗口，但现在我只是从一个链接开始，因为我是初学者，所以更容易。

并已尝试修改代码。

这是我的数据集，如您所见，我添加了键/元素（不确定它是哪个）“url”并指定了一个链接。

var data = [{key: 'Group1', values: [{x: 1, y: 1, url:"https:google.com"}, {x: -2, y: 3}, {x: 4, y: -9}]},
            {key: 'Group2', values: [{x: 2, y: 0}, {x: -4, y: -4}, {x: 1, y: 8}]}];

  return data;

然后按照第一个链接，我将其粘贴到代码的 html 中

nodeEnter.append("svg:a")
  .attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property
.append("svg:rect")
  .attr("y", -barHeight / 2)
  .attr("height", barHeight)
  .attr("width", barWidth)
  .style("fill", color)
  .on("click", click);  // <- remove this if you like

但它不起作用，我猜是 nvd3 与纯 d3 代码不兼容。任何人都可以帮助我提供我需要执行此操作的代码示例吗？

【问题讨论】：

您找到解决方案了吗？

标签： d3.js nvd3.js

【解决方案1】：

如果您阅读 nvd3 散点图的source code，您会看到可以设置多个参数，但不能设置这个。

Nvd3 是一个提供可重复使用图表的库，这意味着它们提供了一大堆功能，但是由于哪些内容是公开的或不公开的，即使它们尝试拥有尽可能多的功能，你也会受到一些限制。您在代码中尝试执行的操作将不起作用，因为在调用 nvd3 散点图时您无法直接控制它。

不过，有一个好消息：Nvd3 是开源的，所以你可以修改 scatter.js 的源代码来做你想做的事。

【讨论】：

【解决方案2】：

您可以查看源代码并注释指针事件行

div.tooltip {
  position: absolute;   
  text-align: center;   
  width: 60px;  
  height: 28px;     
  padding: 2px; 
  font: 12px sans-serif;    
  background: lightsteelblue;   
  border: 0px;                  
  border-radius: 8px;
 /*  pointer-events: none;  This line needs to be removed */

}

有关详细信息，请参阅this 链接。

【讨论】：