D3.js: Using images (with filenames specified in data) as tick values on axis

Dataset:

var dataset = [
{
 "bank": "Bank 1",
 "img": "Picture1.png"
},
{
 "bank": "Bank 2",
 "img": "Picture2.png"
},                  
{
 "bank": "Bank 3",
 "img": "Picture3.png"
}
];

D3 JS code:

var w = 1000;
var h = 700;
var padding = 30;
var wpadding = 120;
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h+padding);


svg.select(".axis").selectAll("text").remove();

var ticks = svg.select(".axis").selectAll(".tick")
                    .data(dataset)
                    .append("svg:image")
                    .attr("xlink:href", function (d) { return d.img ; })
                    .attr("width", 100)
                    .attr("height", 100);
                    .attr("x", -120);
                    .attr("y", -50);


var yScale = d3.scale.ordinal()
                .domain(dataset.map(function (d) { return d.bank; }))
                .rangeRoundBands([0, h], 0.55);

var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

    svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + wpadding + ", 0)")
                .call(yAxis);