1

http://nvd3.org/ghpages/scatter.html

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

我在 d3.js 对象中找到了这个链接超链接

并试图修改代码。

这是我的数据集，如您所见，我添加了键/元素（不确定它是哪个）“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 代码不兼容。任何人都可以帮助我提供我需要执行此操作的代码示例吗？

4

2 回答 2

1

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

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

不过有一个好消息：Nvd3 是开源的，所以你可以修改 scatter.js 的源代码，以便为所欲为。

于 2013-03-26T16:06:49.623 回答
0

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

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 */

}

有关更多信息，请参阅此链接。

于 2015-06-23T16:38:45.083 回答