D3 Examples - Circular Brush 2

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Circular Brush w/ Brush Handle</title>
  <meta charset="utf-8" />
</head>
<style>
​
  #viz, svg {
    width: 1000px;
    height: 1000px;
  }
​
    .resize {
    fill-opacity: .5;
    cursor: move;
    stroke: black;
    stroke-width: 1px;
  }
​
  .extent {
    fill-opacity: .25;
    fill: rgb(205,130,42);
    cursor: hand;
    stroke: black;
    stroke-width: 1px;
  }
​
  .e {
    fill: rgb(111,111,111);
    cursor: move;
  }
​
  .w {
    fill: rgb(169,169,169);
    cursor: move;
  }
​
  path.piehours {
      fill: rgb(246,139,51);
    stroke: black;
    stroke-width: 1px;
  }
  
</style>
<script>
​
​
function makeViz() {
​
  piebrush = d3.svg.circularbrush();
​
  piebrush
  .range([1,24])
  .innerRadius(80)
  .outerRadius(120)
  .on("brushstart", pieBrushStart)
  .on("brushend", pieBrushEnd)
  .on("brush", pieBrush);
​
  d3.select("svg")
  .append("g")
  .attr("transform", "translate(250,250)")
  .call(piebrush);
​
  var hours = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
​
  var pie = d3.layout.pie().value(function() {return 1}).sort(d3.ascending);
  var pieArc = d3.svg.arc().innerRadius(130).outerRadius(160);
  d3.select("svg")
  .append("g")
  .attr("transform", "translate(250,250)")
  .attr("class", "piebrush")
  .selectAll("path")
  .data(pie(hours))
  .enter()
  .append("path")
  .attr("class", "piehours")
  .attr("d", pieArc)
  .on("click", function(d) {console.log(d)})
​
​
  function pieBrush() {
    d3.selectAll("path.piehours")
    .style("fill", piebrushIntersect)
​
    var _m = d3.mouse(d3.select("g.piebrush").node())
​
    console.log(_m)
​
    d3.selectAll(".brushhandle")
    .attr("cx", _m[0])
    .attr("cy", _m[1])
    .attr("x2", _m[0])
    .attr("y2", _m[1])
​
  }
​
  function piebrushIntersect(d,i) {
    var _e = piebrush.extent();
​
    if (_e[0] < _e[1]) {
      var intersect = (d.data >= _e[0] && d.data <= _e[1]);
    }
    else {
      var intersect = (d.data >= _e[0]) || (d.data <= _e[1]);      
    }
​
    return intersect ? "rgb(241,90,64)" : "rgb(231,231,231)"
  }
​
​
​
  function pieBrushStart() {
​
    d3.select("g.piebrush")
    .append("line")
    .attr("class", "brushhandle")
    .style("stroke", "brown")
    .style("stroke-width", "2px")
​
    d3.select("g.piebrush").append("circle")
    .attr("class", "brushhandle")
    .style("fill", "brown")
    .attr("r", 5)
​
  }
​
  function pieBrushEnd() {
​
    d3.selectAll(".brushhandle").remove();
  }
​
​
}
​
</script>
<body onload="makeViz()">
<div id="viz"><svg></svg><div id="buttons"></div></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.svg.circularbrush.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>
    