访问值在D3.js

Question

点击特定节点的时候我正在使用D3一个pack布局如下：

var margin = 20, 
diameter = 500; 

var color = d3.scale.linear() 
//var color = ['steelblue','green','grey'] 
    //.domain([3, 4]) 
    .range(["steelblue", "#81CFE0", "darkslategrey"]) 
    .interpolate(d3.interpolateHcl); 

var pack = d3.layout.pack() 
    .padding(2) 
    .size([diameter - margin, diameter - margin]) 
    .value(function(d) { return d.size; }) 

var svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

d3.json("data.json", function(error, root) { 
    if (error) throw error; 

    var focus = root, 
    nodes = pack.nodes(root), 
    view; 

    var circle = svg.selectAll("circle") 
     .data(nodes) 
     .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); 

    var text = svg.selectAll("text") 
     .data(nodes) 
     .enter().append("text") 
     .attr("class", "label") 
     .style("fill", "black") 
     .style("display", function(d) { return d.parent === root ? null : "none"; }) 
     .text(function(d) { return d.name; }); 

    var node = svg.selectAll("circle,text"); 

    d3.select("body") 
     .data(nodes) 
     .style("background", color(-1)) 

    zoomTo([root.x, root.y, root.r * 2 + margin]); 

    function zoom(d) { 
     var focus0 = focus; focus = d; 

     var transition = d3.transition() 
      .duration(d3.event.altKey ? 7500 : 750) 
      .tween("zoom", function(d) { 
       var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]); 
       return function(t) { zoomTo(i(t)); }; 
      }); 

     transition.selectAll("text") 
      .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) 
      .style("fill", "darkslategrey") 
      .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) 
      .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); 
    } 

    function zoomTo(v) { 
     var k = diameter/v[2]; view = v; 
     node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }); 
     circle.attr("r", function(d) { return d.r * k; }); 
    } 
}); 
d3.select(self.frameElement).style("height", diameter + "px"); 

目前，如果点击一个node--leaf，它只是缩小退了出去。但我想提醒存储在该节点的JSON中的URL。

JSON看起来是这样的：

{ 
    "name": "Packages", 
    "children": [ 
     { 
      "name": "Talks", 
      "children": [ 
       { 
        "name": "talk_1", 
        "size": 722, 
        "url": "www.example_1.com" 
       }, 
       { 
        "name": "talk_2", 
        "size": 722, 
        "url": "www.example_2.com" 
       }, 
       { 
        "name": "talk_3", 
        "size": 722, 
        "url": "www.example_3.com" 
       } 
      ] 
     } 
    ] 
} 

所以，如果我点击talk_3节点上，我应该通过访问d.url得到www.example_3.com。

Answer 1

你可以在点击功能德访问的URL，如下图所示：

var circle = svg.selectAll("circle") 
      .data(nodes) 
      .enter().append("circle") 
      .attr("class", function (d) { 
      return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; 
     }) 
      .style("fill", function (d) { 
      return d.children ? color(d.depth) : null; 
     }) 
      .on("click", function (d) { 
       var win = window.open(d.url, '_blank'); 
       win.focus(); 
      console.log(d.url); 
      if (focus !== d) zoom(d), d3.event.stopPropagation(); 
     }); 

在点击功能，这将在新标签

var win = window.open(d.url, '_blank'); 
win.focus(); 

开拓网址希望这可以帮助！

Answer 2

如果您想通过使用alert函数onClick事件来“提醒”您可以做到这一点，如下面代码所示。工作演示请看this plnkr。

d3.json("data.json", function(error, root) { 
     if (error) throw error; 

     var focus = root, 
     nodes = pack.nodes(root), 
     view; 

     var circle = svg.selectAll("circle") 
     .data(nodes) 
     .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .style("fill", function(d) { return d.children ? color(d.depth) : null; }) 
     .on("click" , function(d) { 

      console.log(d.url); 
      alert(d.url); 
      return d; 
     })