Using ClipPath - nice!

http://stackoverflow.com/questions/22545503/d3-image-transition-of-height-only

by Nivaldo

HTML

<button id="inbutton">In</button>
<button id="outbutton"/>Out</button>
<div id="box" style="height:400px; width:400px"></div>

JavaScript

var svgContainer = d3.select("#box").append("svg")
.style("width", '100%')
.style("height", '100%')
.style("background-color","blue");

var clipRect = svgContainer.append('svg:defs')
                .append('svg:clipPath')
                .attr('id', 'shutter-clip')
                .append('rect')
                .attr({
                    x: 0,
                    y: 0,
                    height: 400,
                    width: 400
                })
           

var imgs = svgContainer.append("svg:image")
    .attr("xlink:href", "http://guiaavare.com/img/upload/images/Aishwarya-Rai-face.jpg")
    .attr("width", "400")
    .attr("height", "400")
    .attr("clip-path", "url(#shutter-clip)");

d3.select("#inbutton").on("click", function () {
    clipRect
        .attr("height",400)
        .transition()
        .attr({
            height: 0,
            y: 200
        })
        .duration(500);
});

d3.select("#outbutton").on("click", function () {
    clipRect
        .transition()
        .attr({
            height: 400,
            y: 0
        })
        .duration(500);
});