|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.axis--grid .domain { |
|
fill: #ddd; |
|
stroke: none; |
|
} |
|
|
|
.axis--x .domain, |
|
.axis--grid .tick line { |
|
stroke: #fff; |
|
} |
|
|
|
.axis--grid .tick--minor line { |
|
stroke-opacity: .5; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
var brushes = []; |
|
|
|
var margin = {top: 200, right: 40, bottom: 200, left: 40}, |
|
width = 960 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var x = d3.scaleTime() |
|
.domain([new Date(2011, 7, 1), new Date()]) |
|
.rangeRound([0, width]); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
svg.append("g") |
|
.attr("class", "axis axis--grid") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x) |
|
.ticks(d3.timeMonth.every(2)) |
|
.tickSize(-height) |
|
.tickFormat(function() { return null; })) |
|
.selectAll(".tick") |
|
.classed("tick--minor", function(d) { return d.getMonth(); }); |
|
|
|
svg.append("g") |
|
.attr("class", "axis axis--x") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x) |
|
.ticks(d3.timeYear.every(1)) |
|
.tickPadding(0)) |
|
.attr("text-anchor", null) |
|
.selectAll("text") |
|
.attr("x", 6); |
|
|
|
var gBrushes = svg.append('g').attr('class', 'brushes'); |
|
|
|
// make a couple brushes |
|
makeBrush(); |
|
makeBrush(); |
|
|
|
// bind each brush object from the brushes array, creating an empty selection |
|
var brushSelection = gBrushes.selectAll('.brush').data(brushes, d => d.id); |
|
|
|
// create the brushes individual svg groups, instantiate them, and set their initial date values |
|
brushSelection |
|
.enter() |
|
.insert('g', '.brush') |
|
.attr('class', 'brush') |
|
.attr('id', d => `brush-${d.id}`) |
|
// eslint-disable-next-line |
|
.each(function(brushObj) { |
|
// this init's the brush |
|
brushObj.brush(d3.select(this)); |
|
|
|
// set some default values of the brushes |
|
if (brushObj.id === 0) { |
|
brushObj.brush.move(d3.select(this), [ |
|
x(new Date(2015, 7, 1)), |
|
x(new Date(2016, 7, 1)), |
|
]); |
|
} else { |
|
brushObj.brush.move(d3.select(this), [ |
|
x(new Date(2012, 7, 1)), |
|
x(new Date(2013, 7, 1)), |
|
]); |
|
} |
|
}); |
|
|
|
// remove pointer events on each brushes overlay, this prevents new brushes from being made |
|
d3.selectAll('.overlay').style('pointer-events', 'none'); |
|
|
|
function makeBrush() { |
|
const brush = d3 |
|
.brushX() |
|
.extent([[0, 0], [width, height]]) |
|
.on('end', brushended); |
|
|
|
brushes.push({ id: brushes.length, brush }); |
|
|
|
return brush; |
|
} |
|
|
|
function brushended() { |
|
if (!d3.event.sourceEvent) return; // Only transition after input. |
|
if (!d3.event.selection) return; // Ignore empty selections. |
|
var d0 = d3.event.selection.map(x.invert), |
|
d1 = d0.map(d3.timeMonth.round); |
|
|
|
// If empty when rounded, use floor & ceil instead. |
|
if (d1[0] >= d1[1]) { |
|
d1[0] = d3.timeMonth.floor(d0[0]); |
|
d1[1] = d3.timeMonth.offset(d1[0]); |
|
} |
|
|
|
d3.select(this).transition().call(d3.event.target.move, d1.map(x)); |
|
} |
|
|
|
</script> |
