mousewheel scroll

by christopheviau

HTML

<div id="d3-container"></div>

CSS

#d3-container {
    border: 2px solid #8AC007;
    max-width: 400px;
    max-height: 400px;
}

rect {
    fill: red;
}
}

JavaScript

var div = d3.select('#d3-container');

var drawingSpace = div.append('svg')
    .attr({
        width: 400,
    	height: 300
    })
	.on('mousewheel', mousewheelFun)
    .append('g')
    .attr({transform: 'translate(20,20)'});

var rect = drawingSpace.append("rect")
    .attr({
    	width: 30,
        height: 30,
       	transform: 'translate(0,0)'
	});

function mousewheelFun() {
    var xDelta = d3.event.wheelDeltaX,
        yDelta = d3.event.wheelDeltaY;

	var translate = d3.transform(rect.attr('transform')).translate;
    var newTransformX = translate[0] + xDelta;
    var newTransformY = translate[1] + yDelta;
    rect.attr({transform: 'translate(' + [newTransformX, newTransformY] + ')'});
}