svg Scroll bar using D3 brush
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<svg width="960" height="1000"></svg>
CSS
.area {
fill: steelblue;
clip-path: url(#clip);
}
JavaScript
var svg = d3.select("svg"),
margin = { top: 20, right: 20, bottom: 110, left: 40 },
margin2 = { top: 430, right: 20, bottom: 30, left: 40 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
svg.append("defs").append("clipPath").attr("id", "clip").append("rect").attr("width", width).attr("height", 150);
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([0, 10]),
y2 = d3.scaleLinear().range([height2, 0]);
var data = [];
for (var i = 0; i < 10; i++) {
data.push(i);
}
var svg = d3.select('svg');
var scale = d3.scaleLinear().domain([20, 30]).range([10, 450])
function brushmoved() {
// var s = d3.event.selection;
var s = d3.event.selection || y2.range();
d3.select('.asst').attr("transform", function (d, i) { return "translate(" + 0 + "," + (-s[1]) + ")"; });
if (s == null) {
//...
} else {
//var sx = s.map(x.invert);
//circle.classed("active", function(d) { return sx[0] <= d && d <= sx[1]; });
// handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + s[i] + "," + height / 2 + ")"; });
//...
}
}
count = 0;
var focus = svg.append("g").attr("class", "focus area").attr("transform", "translate(" + margin.left + "," + margin.top + ")").append("g").attr('class', 'asst').selectAll("text").data(data).enter();
focus.append('text').text(function (d) { return d }).attr('y', function (d, i) {
count += 20;
return count;
});
//POSTION XY //WIDTH,HEIGHT
var brush = d3.brushY().extent([[0, 0], [10, 150]]).on("start brush end", brushmoved);
var g = svg.append('g')
var gBrush = g.append("g").attr("class", "brush").call(brush);
d3.selectAll('.brush>.handle').remove();
...