d3-dragrect

A JavaScript D3 drag selection rectangle component.

JavaScript - d3-dragrect

A JavaScript D3 drag selection rectangle component. Only horizontal at the moment.

This essentially allows you to use a graph that you created in D3 and then drag and visually select portions of the graph. You can create multiple selections.

Screenshots and examples coming when the API stabilizes a bit.

<script src="/path/to/d3-dragrect.js"></script>
npm install --save d3-dragrect
component install jprichardson/d3-dragrect
//only use 'require' if using browserify or component 
var d3dragrect = require('d3-dragrect') 
 
//'svg' is your svg element, typically 'height' would be the height of 'svg' 
var dragBehavior = d3dragrect(d3, svg, xScale, height)
 
svg.call(dragBehavior)
 

The default styling will be very ugly. This makes it look alright:

.d3-dragrect {
  stroke: steelblue;
  stroke-dasharray: 5,5;
  fill: aliceblue;
  fill-opacity: 0.5;
  hover: ;
}
 
.d3-dragrect:hover {
  stroke: red;
  fill-opacity: 0.7;
  stroke-dasharray: 1,1;
}
 
.d3-dragrect.selected {
  stroke: red;
  fill-opacity: 0.5;
}

(MIT License)

Copyright 2013, JP Richardson jprichardson@gmail.com