Question

我有像JSON这样的数据：

{
 "name": "OSS Applications",
 "children": [
  {
     "name": "ELITE 3E",
     "children": [
      {"name": "Elite 3E Mobile Gateway"},
      {"name": "Elite 3E Mobile Website"},
      {"name": "Elite 3E Mobile Application"}

     ]
    },
    {
     "name": "WESTLAW DOC & FORM BUILDER",
     "children": [
      {"name": "Cobalt Website WFB"},
      {"name": "Cobalt Static Content WFB"},
      {"name": "Cobalt Search WFA"},
      {"name": "Cobalt Forms Assembly WFB"},
      {"name": "Cobalt Foldering WFB"}
     ]
    },
    {
     "name": "FINDLAW.COM",
     "children": [
      {"name": "Findlaw-Infirmation"},
      {"name": "Findlaw-hippocms"},
      {"name": "Findlaw-Lawyers Directory"},
      {"name": "Findlaw-ProfileUpdate"},
      {"name": "Findlaw-Pview"},
    {"name": "Findlaw-RCMS"},
    {"name": "Findlaw-public-channel"}
     ]
    }
 ]
}

我想添加一个URL链接到应用程序“ELITE 3E”，“WESTLAW DOC＆amp; FORM BUILDER”和“FINDLAW.com”。我怎么做？我试图复制可折叠的缩进树。 mbostock的块＃1093025

Answer 1

您可以使用SVG link来实现此目的。您需要做的就是在要作为链接的元素周围添加a元素，例如

svg.append("a")
   .attr("xlink:href", function(d) { return d.url; })
   .append("circle")
   //etc

要在新窗口中打开链接，请将target属性设置为_blank：

svg.append("a")
   .attr("xlink:href", function(d) { return d.url; })
   .attr("target", "_blank")

Answer 2

我曾经添加如下链接，你可以添加attr onclick。

<text x="7" y="20" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:white;fill:white;" zIndex="1">
    <tspan onclick="location.href="http://target.url.com"" style="cursor: pointer;" x="7">URL TEXT</tspan>
</text>

另一方面，您可以绑定click事件来实现它。

svg.selectAll('.add-url-node')
   .on('click',function(d){
       location.href = 'target.url.com';
   });

d3.js - 如何为可折叠缩进树添加url链接

2 个答案: