title: venn.js selecting Set[A] except Set[B]
body: <p>I have this code:</p>
  
  <pre><code>var sets = [
      {sets: ['A'], size: 10},
      {sets: ['B'], size: 10},
      {sets: ['A','B'], size: 5}
  ];
  
  var chart = venn.VennDiagram();
  var div = d3.select("#venn").datum(sets).call(chart);
  </code></pre>
  
  <p>using excellent <a href="https://github.com/benfred/venn.js/" rel="nofollow noreferrer">venn.js</a> library, my venn diagram is drawn and works perfectly.</p>
  
  <p>using this code:</p>
  
  <pre><code>            div.selectAll("g")
                  .on("mouseover", function (d, i) {
                      // sort all the areas relative to the current item
                      venn.sortAreas(div, d);
  
                      // Display a tooltip with the current size
                      tooltip.transition().duration(400).style("opacity", .9);
                      tooltip.text(d.size + " items");
  
                      // highlight the current path
                      var selection = d3.select(this).transition("tooltip").duration(400);
                      selection.select("path")
                          .style("stroke-width", 3)
                          .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
                          .style("stroke-opacity", 1)
                          .style("cursor", "pointer");
                  })
  
                  .on("mousemove", function () {
                      tooltip.style("left", (d3.event.pageX) + "px")
                             .style("top", (d3.event.pageY - 28) + "px");
                  })
  
                  .on("click", function (d, i) {
                      window.location.href = "/somepage"
                  })
  
                  .on("mouseout", function (d, i) {
                      tooltip.transition().duration(400).style("opacity", 0);
                      var selection = d3.select(this).transition("tooltip").duration(400);
                      selection.select("path")
                          .style("stroke-width", 1)
                          .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
                          .style("stroke-opacity", 0);
                  });
  </code></pre>
  
  <p>I'm able to add Click, mouseover,... functionality to my venn.</p>
  
  <p><strong>Here is the problem:</strong></p>
  
  <p>Adding functionality to Circles (Sets A or B) works fine.</p>
  
  <p>Adding functionality to Intersection (Set A intersect Set B) works fine.</p>
  
  <p>I need to add some functionality to Except Area (set A except set B)</p>
  
  <p>This question helped a little: <a href="https://stackoverflow.com/questions/33630674/2d-polygon-boolean-operations-with-d3-js-svg">2D Polygon Boolean Operations with D3.js SVG</a></p>
  
  <p>But I had no luck making this work.</p>
  
  <p>Tried finding out Except area using: <a href="https://sourceforge.net/projects/jsclipper/" rel="nofollow noreferrer">clipperjs</a> or <a href="https://github.com/w8r/GreinerHormann" rel="nofollow noreferrer">Greiner-Hormann polygon clipping algorithm</a> but couldn't make it work.</p>
  
  <p><strong><em>Update 1:</em></strong></p>
  
  <p>The code in this question is copied from venn.js sample: <a href="http://benfred.github.io/venn.js/examples/intersection_tooltip.html" rel="nofollow noreferrer">http://benfred.github.io/venn.js/examples/intersection_tooltip.html</a></p>
  
  <p>Other samples:
  <a href="https://github.com/benfred/venn.js/" rel="nofollow noreferrer">https://github.com/benfred/venn.js/</a></p>