如何在D3上點擊事件

我使用D3進行鏈接分析。爲此，我需要添加一個單擊事件，以便我可以顯示節點的值。如何在D3上點擊事件

這裏是我的代碼...

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
.link { 
fill: none; 
stroke: #666; 
stroke-width: 1.5px; 
} 

#licensing { 
fill: green; 
} 

.link.licensing { 
stroke: green; 
} 

.link.resolved { 
stroke-dasharray: 0, 2 1; 
    } 

circle { 
fill: #ccc; 
stroke: #333; 
stroke-width: 1.5px; 
} 

text { 
font: 10px sans-serif; 
pointer-events: none; 
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/ 

    /*Here licensing type is making the green arrow 
    *Here resolved type is making the solid arrow 
    *Here suit type is making the dotted arrow 
    * 
    * 
    **/ 

    var links = [ { 
     source : "Microsoft", 
     target : "Amazon", 
     type : "licensing" 
    }, { 
     source : "Microsoft", 
     target : "HTC", 
     type : "licensing" 
    }, { 
     source : "Samsung", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Motorola", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Nokia", 
     target : "Apple", 
     type : "resolved" 
    }, { 
     source : "HTC", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Kodak", 
     target : "Apple", 
     type : "suit" 
    }, { 
     source : "Microsoft", 
     target : "Barnes & Noble", 
     type : "suit" 
    }, { 
     source : "Microsoft", 
     target : "Foxconn", 
     type : "suit" 
    }, { 
     source : "Apple", 
     target : "HTC", 
     type : "suit" 
    }, { 
     source : "Microsoft", 
     target : "Inventec", 
     type : "suit" 
    }, { 
     source : "Samsung", 
     target : "Kodak", 
     type : "resolved" 
    }, { 
     source : "LG", 
     target : "Kodak", 
     type : "resolved" 
    }, { 
     source : "RIM", 
     target : "Kodak", 
     type : "suit" 
    }, { 
     source : "Sony", 
     target : "LG", 
     type : "suit" 
    }, { 
     source : "Kodak", 
     target : "LG", 
     type : "resolved" 
    }, { 
     source : "Apple", 
     target : "Nokia", 
     type : "resolved" 
    }, { 
     source : "Qualcomm", 
     target : "Nokia", 
     type : "resolved" 
    }, { 
     source : "Kodak", 
     target : "Samsung", 
     type : "resolved" 
    }, { 
     source : "Apple", 
     target : "Samsung", 
     type : "suit" 
    }, { 
     source : "Kodak", 
     target : "RIM", 
     type : "licensing" 
    }, { 
     source : "Kodak", 
     target : "Qualcomm", 
     type : "licensing" 
    } ]; 

    var nodes = {}; 

    // Compute the distinct nodes from the links. 
    links.forEach(function(link) { 
     link.source = nodes[link.source] || (nodes[link.source] = { 
      name : link.source 
     }); 
     link.target = nodes[link.target] || (nodes[link.target] = { 
      name : link.target 
     }); 
    }); 

    var width = 960, height = 500; 

    var force = d3.layout.force().nodes(d3.values(nodes)).links(links) 
      .size([ width, height ]).linkDistance(60).charge(-300).on(
        "tick", tick).start(); 

    var svg = d3.select("body").append("svg").attr("width", width).attr(
      "height", height); 

    // Per-type markers, as they don't inherit styles. 
    svg.append("defs").selectAll("marker").data(
      [ "suit", "licensing", "resolved" ]).enter().append("marker") 
      .attr("id", function(d) { 
       return d; 
      }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY", 
        -1.5).attr("markerWidth", 6).attr("markerHeight", 6) 
      .attr("orient", "auto").append("path").attr("d", 
        "M0,-5L10,0L0,5"); 

    var path = svg.append("g").selectAll("path").data(force.links()) 
      .enter().append("path").attr("class", function(d) { 
       return "link " + d.type; 
      }).attr("marker-end", function(d) { 
       return "url(#" + d.type + ")"; 
      }); 

    var circle = svg.append("g").selectAll("circle").data(force.nodes()) 
      .enter().append("circle").attr("r", 6).call(force.drag); 

    var text = svg.append("g").selectAll("text").data(force.nodes()) 
      .enter().append("text").attr("x", 8).attr("y", ".31em").text(
        function(d) { 
         return d.name; 
        }); 

    //selection is happening 
    var selected = circle.filter(function(d) { 
     return d.name; 
    }); 

    selected.each(function(d) { 
     // d contains the data for the node and this is the circle element 

     console.log(d.name); 
    }); 

    var circle = svg.append("g").selectAll("circle").data(force.nodes()) 
      .enter().append("circle").attr("r", 6).on("click", clickfn) 
      .call(force.drag); 

    var clickfn = function(node) { 
     alert(node); 
    } 

    // Use elliptical arc path segments to doubly-encode directionality. 
    function tick() { 
     path.attr("d", linkArc); 
     circle.attr("transform", transform); 
     text.attr("transform", transform); 
    } 

    function linkArc(d) { 
     var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math 
       .sqrt(dx * dx + dy * dy); 
     return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr 
       + " 0 0,1 " + d.target.x + "," + d.target.y; 
    } 

    function transform(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    } 
</script>

我想在此代碼做的是畫一些節點和它們之間做出的鏈接。顯然這些鏈接是直接的。現在，我想每一個節點通過添加點擊事件，但我不能說..有人能幫助我與節點塔click事件...

來源

2013-11-27 Subho

你談論點擊一個圓圈或標籤？ – VividD

您是否嘗試過簡單：

var circle = svg.append("g").selectAll("circle") 
    .data(force.nodes()) 
    .enter() 
    .append("circle") 
    .attr("r", 6) 
    .on("click", clickfn) 
    .call(force.drag); 

var clickfn = function(node) { 
    // do something 
}

來源

2013-11-27 12:58:08

我已經編輯了我的代碼，但我無法獲得任何值 – Subho

如何在D3上點擊事件

回答

相關問題