d3.js对象中的超链接

我在d3.js或java中是一个完整的新手。我正在使用来自http://bl.ocks.org/1093025的缩进树示例。我花了两个小时才把它用在我的本地计算机上，这样应该可以让你了解我的技能水平。d3.js对象中的超链接

我打开flare.json文件并开始搞乱它，并能够成功操作它。它看起来像这样

{ 
    "name": "Test D3", 
    "children": [ 
     { 
      "name": "News", 
      "children": [ 
       { 
        "name": "CNN", 
        "size": 1000 
       }, 
       { 
        "name": "BBC", 
        "size": 3812 
       } 
      ] 
     }, 
     { 
      "name": "Blogs", 
      "children": [ 
       { 
        "name": "Engaget", 
        "size": 3938 
       } 
      ] 
     }, 
     { 
      "name": "Search", 
      "children": [ 
       { 
        "name": "Google", 
        "size": 3938 
       }, 
       { 
        "name": "Bing", 
        "size": 3938 
       } 
      ] 
     } 
    ] 
}

我现在想要做的是尝试添加超链接。例如，我希望能够点击“CNN”并前往CNN.com。是否有我可以做flare.json的修改，这将做到这一点？

来源

2012-10-27 Mr. Fegur

这很容易，只需添加一些“关键”：“价值”对。例如：

 "children": [ 
      { 
       "name": "Google", 
       "size": 3938, 
       "url": "https://www.google.com" 

      }, 
      { 
       "name": "Bing", 
       "size": 3938, 
       "url": "http://www.bing.com" 

      } 
     ]

当然，在你的代码D3然后你需要append<svg:a>标签并设置其属性xlink:href。

以下是一些可能对您有所帮助的html和d3代码。首先，你需要导入XLink命名空间中的HTML文件：

<html xmlns:xlink="http://www.w3.org/1999/xlink"> 
... 
</html>

然后在您添加节点为每个数据元素D3的绘制代码你包你想成为有svg:a标签可点击链接的元素：

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

你可能想要删除的点击处理程序（这是在最初的例子存在）删去。对（“点击”，单击），因为它可能与SVG链接的默认行为干扰。

点击你的rect s现在应该引导你到合适的url。 SVG链接可能无法在所有浏览器中完全实现。

或者，您可以修改click处理程序以从d.url中读取URL，并使用该处理程序通过JavaScript手动将浏览器重定向到该URL：window.location = d.url;。那么你不需要svg:a标签和xlink代码。尽管添加真实链接（不是脚本化链接）的好处是用户/浏览器可以决定要做什么（例如，在新标签页中打开）。如果您的某些用户禁用了JavaScript，这也会有所帮助。

来源

2012-10-28 13:27:45 Juve

非常感谢。我能够使它与你的答案一起工作。 –

关于哪些**浏览器**支持SVG链接**，请看看这里：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29 – rmoestl

请注意，至少在Chrome中，你不需要在任何地方声明任何名称空间，并且在D3.js v3中，您只需编写'.append（'a'）'而不是'.append（'svg：a'）'。但是，您仍然需要编写'xlink：href'。如果你仍然需要DOM中的命名空间，现在你似乎必须使用[这个黑客]（https://groups.google.com/forum/#!msg/d3-js/Sh4ysLFBMRQ/hHjzBP0bX1oJ）来阻止它们用D3.js插入时消失 – mb21

d3.js对象中的超链接

回答

相关问题