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);