title: How to select an element in svg in D3
body: <p>I have an application in D3 which forms a network like structure,it has a few nodes thats are connected to each other.Now i want to select a portion of that network and also want the values of that selected portion.here i am posting my screen shot<img src="https://i.stack.imgur.com/uuefM.png" alt="this is the network i created using D3"> </p>
  
  <p><img src="https://i.stack.imgur.com/Wyw6B.png" alt="i want this type of selection"></p>
  
  <p>Now i want to select Foxconn and Amazon nodes and also want their values..</p>
  
  <p>here is my code in D3..</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  .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;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="app.css"&gt;
  &lt;script&gt;
      // 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 : "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);
  
      var gStates = svg.selectAll("g.state").data(links);
  
      var drag = d3.behavior.drag().on("drag", function(d, i) {
          var selection = d3.selectAll('.selected');
  
          if (selection[0].indexOf(this) == -1) {
              selection.classed("selected", false);
              selection = d3.select(this);
              selection.classed("selected", true);
          }
  
          selection.attr("transform", function(d, i) {
              d.x += d3.event.dx;
              d.y += d3.event.dy;
              return "translate(" + [ d.x, d.y ] + ")"
          })
          // reappend dragged element as last
          // so that its stays on top
          this.parentNode.appendChild(this);
          d3.event.sourceEvent.stopPropagation();
      });
  
  
      // 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;
                      });
  
      // 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 + ")";
      }
  &lt;/script&gt;
  </code></pre>