D3 clipping

by jarandaf

CSS

svg {
    background-color: grey;
}

.circle {
    fill: orange;
}

JavaScript

"use strict";

let margin = {top: 50, left: 50, bottom: 50, right: 50};
let width = 500 - margin.left - margin.right;
let height = 500 - margin.top - margin.bottom;
let n = 100;


const data = d3.range(n).map(d => {
    return {x: Math.random()*width, y: Math.random()*height}
});

let x = d3.scale.linear()
	.domain([0, 500])
	.range([0, width]);

let xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom');

let y = d3.scale.linear()
	.domain([0, 500])
	.range([height, 0]);

let yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

let zoomed = function () {
    console.log('zoom', d3.event.translate, d3.event.scale);
    d3.selectAll('.circle').attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
	svg.select('.x.axis').call(xAxis);
    svg.select('.y.axis').call(yAxis);
}

let zoom = d3.behavior.zoom()
	.x(x)
	.y(y)
	.scaleExtent([1,8])
	.on('zoom', zoomed);

const svg = d3.select('body').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.attr('pointer-events', 'all');

const g = svg.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

g.append('defs')
    .append('clipPath')
	.attr('id', 'clip')
	.append('rect')
    	.attr('width', width)
    	.attr('height', height);

g.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')')
	.call(xAxis);

g.append('g')
	.attr('class', 'y axis')
	.call(yAxis);

const main = g.append('g')
	.attr('class', 'main')
	.attr('clip-path', 'url(#clip)')
	.call(zoom);

let circles = main.selectAll('.circle').data(data).enter();

circles.append('circle')
	.attr('class', 'circle')
	.attr('cx', d => x(d.x))
	.attr('cy', d => y(d.y))
	.attr('r', 5);