alhoo/multiple d3 dragselectors

## multiple d3 dragselectors
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://rawgit.com/lmcnulty4/d3dragSelector/master/dragSelector.js"></script>
    <style>
        .selector {
            fill: blue;
            fill-opacity: 0.3;
            stroke: blue;
            stroke-opacity: 0.4;
            stroke-width: 2;
        }
        .selected {
          fill: green !important;
        }
        .items {
          position: absolute;
          top:100px;
          left: 750px;
          width: 200px;
          height: 400px;
          pointer-events:none;
        }
        svg {
          display:block;
          margin: 0 auto;
        }
    </style>
  </head>
  <body>
    <script>
      'use strict';

      // Specify some nice data
      var circData = [
          { x : 100, y : 60, label : "first" },
          { x : 200, y : 150, label : "second" },
          { x : 300, y : 320, label : "third" },
          { x : 400, y : 250, label : "fourth" },
          { x : 150, y : 250, label : "fifth" },
          { x : 350, y : 70, label : "sixth" }
      ];

      // Append our SVG
      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", 960)
                  .attr("height", 348);

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

      // Append some elements used to demonstrate events
      var selectPara = d3.select("body").append("p");
      var itemContainer = d3.select("body").append("div").classed("items", true);

      // Simple function to fill the "itemContainer" with a list of p elements, one for each selected item, executed at the end of dragging
      function onDragEnd(nodes) {
        itemContainer.selectAll("p").remove();
        nodes.each(function(d, i, a) {
          itemContainer
            .append("p")
            .text(d.label);
        });
      }

      // Simple function to fill the p element with the labels of our selected elements, executed whenever the items under the selection change
      // Demonstrates the responsiveness of this event and the plugin
      function onSelect(nodes) {
        var txt = "";
        nodes.each(function(d, i, a) {
          txt += d.label + ", ";
        });
        if (txt) {
          selectPara.text(txt.substr(0, txt.length - 2));
        } else {
          selectPara.text("");
        }
      }

      // Append our circles
      svg.selectAll("circle")
          .data(circData)
          .enter()
          .append("circle")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", 20)
          .attr("class", function(d) {
            return (d.label === "fourth" || d.label === "second") ? "" : "findMe"; // make the fourth and second circles have an empty class - all others have "findMe"
          })
          .attr("style", "fill: red;")
          .attr("id", function(d) { return d.label; });

      svg2.selectAll("circle")
          .data(circData)
          .enter()
          .append("circle")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", 20)
          .attr("class", function(d) {
            return (d.label === "fourth" || d.label === "second") ? "" : "findMe"; // make the fourth and second circles have an empty class - all others have "findMe"
          })
          .attr("style", "fill: red;")
          .attr("id", function(d) { return d.label; });

      // Set up the drag selector
      var dragHelp = d3dragSelector()
                    .selectNode("circle")         // tell it we're looking for circles
                    .selectFilter(".findMe")      // tell it that we're only looking for circles with CSS class "findMe" - thus we will ignore the fourth and second circles
                    .rectangleClass("selector")   // tell it that the dragging rectangle's CSS class should be "selector"
                    .selectedClass("selected")    // tell it that selected items should be given a CSS class "selected"
                    .onSelect(onSelect)           // tell it to execute our onSelect function whenever the items being searched for change
                    .onDragEnd(onDragEnd);        // tell it to execute our onDragEnd function whenever we stop dragging
      var dragHelp2 = d3dragSelector()
                    .selectNode("circle")         // tell it we're looking for circles
                    .selectFilter(".findMe")      // tell it that we're only looking for circles with CSS class "findMe" - thus we will ignore the fourth and second circles
                    .rectangleClass("selector")   // tell it that the dragging rectangle's CSS class should be "selector"
                    .selectedClass("selected")    // tell it that selected items should be given a CSS class "selected"
                    .onSelect(onSelect)           // tell it to execute our onSelect function whenever the items being searched for change
                    .onDragEnd(onDragEnd);        // tell it to execute our onDragEnd function whenever we stop dragging

      // And call it
      svg.call(dragHelp.selector());
      svg2.call(dragHelp2.selector());

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://rawgit.com/lmcnulty4/d3dragSelector/master/dragSelector.js"></script>
	<style>
	.selector {
	fill: blue;
	fill-opacity: 0.3;
	stroke: blue;
	stroke-opacity: 0.4;
	stroke-width: 2;
	}
	.selected {
	fill: green !important;
	}
	.items {
	position: absolute;
	top:100px;
	left: 750px;
	width: 200px;
	height: 400px;
	pointer-events:none;
	}
	svg {
	display:block;
	margin: 0 auto;
	}
	</style>
	</head>
	<body>
	<script>
	'use strict';

	// Specify some nice data
	var circData = [
	{ x : 100, y : 60, label : "first" },
	{ x : 200, y : 150, label : "second" },
	{ x : 300, y : 320, label : "third" },
	{ x : 400, y : 250, label : "fourth" },
	{ x : 150, y : 250, label : "fifth" },
	{ x : 350, y : 70, label : "sixth" }
	];

	// Append our SVG
	var svg = d3.select("body")
	.append("svg")
	.attr("width", 960)
	.attr("height", 348);

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

	// Append some elements used to demonstrate events
	var selectPara = d3.select("body").append("p");
	var itemContainer = d3.select("body").append("div").classed("items", true);

	// Simple function to fill the "itemContainer" with a list of p elements, one for each selected item, executed at the end of dragging
	function onDragEnd(nodes) {
	itemContainer.selectAll("p").remove();
	nodes.each(function(d, i, a) {
	itemContainer
	.append("p")
	.text(d.label);
	});
	}

	// Simple function to fill the p element with the labels of our selected elements, executed whenever the items under the selection change
	// Demonstrates the responsiveness of this event and the plugin
	function onSelect(nodes) {
	var txt = "";
	nodes.each(function(d, i, a) {
	txt += d.label + ", ";
	});
	if (txt) {
	selectPara.text(txt.substr(0, txt.length - 2));
	} else {
	selectPara.text("");
	}
	}

	// Append our circles
	svg.selectAll("circle")
	.data(circData)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 20)
	.attr("class", function(d) {
	return (d.label === "fourth" \|\| d.label === "second") ? "" : "findMe"; // make the fourth and second circles have an empty class - all others have "findMe"
	})
	.attr("style", "fill: red;")
	.attr("id", function(d) { return d.label; });

	svg2.selectAll("circle")
	.data(circData)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 20)
	.attr("class", function(d) {
	return (d.label === "fourth" \|\| d.label === "second") ? "" : "findMe"; // make the fourth and second circles have an empty class - all others have "findMe"
	})
	.attr("style", "fill: red;")
	.attr("id", function(d) { return d.label; });

	// Set up the drag selector
	var dragHelp = d3dragSelector()
	.selectNode("circle") // tell it we're looking for circles
	.selectFilter(".findMe") // tell it that we're only looking for circles with CSS class "findMe" - thus we will ignore the fourth and second circles
	.rectangleClass("selector") // tell it that the dragging rectangle's CSS class should be "selector"
	.selectedClass("selected") // tell it that selected items should be given a CSS class "selected"
	.onSelect(onSelect) // tell it to execute our onSelect function whenever the items being searched for change
	.onDragEnd(onDragEnd); // tell it to execute our onDragEnd function whenever we stop dragging
	var dragHelp2 = d3dragSelector()
	.selectNode("circle") // tell it we're looking for circles
	.selectFilter(".findMe") // tell it that we're only looking for circles with CSS class "findMe" - thus we will ignore the fourth and second circles
	.rectangleClass("selector") // tell it that the dragging rectangle's CSS class should be "selector"
	.selectedClass("selected") // tell it that selected items should be given a CSS class "selected"
	.onSelect(onSelect) // tell it to execute our onSelect function whenever the items being searched for change
	.onDragEnd(onDragEnd); // tell it to execute our onDragEnd function whenever we stop dragging

	// And call it
	svg.call(dragHelp.selector());
	svg2.call(dragHelp2.selector());

	</script>
	</body>
	</html>