D3.js: использование изображений (с именами файлов, указанных в данных) в качестве значений галочки по оси

В настоящее время у меня есть эти данные:

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

Сложные данные реального мира, не так ли? Конечно. ОК, в настоящее время у меня есть bank "в качестве значений тика на моей оси с помощью этого кода D3.js:

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

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

В любом случае, я уверен, что вы можете увидеть, с чем я собираюсь. Теперь я пытаюсь сделать значения тика на моей оси ссылкой img в моем наборе данных, а не только на bank.

Сначала я подумал, что это случай использования axis.tickValues ([values]) с анонимной функцией для ссылки на значения img в моих данных JSON, но он не работает. Или я делаю это ужасно неправильно.

Тогда я подумал, что это случай использования:

 var imgs = svg.selectAll("img").data([dataset]);

но тогда моя озабоченность этим методом заключается в том, что это не будет должным образом привязано к оси, как правильные значения тика; Это похоже на то, что они представляют собой только набор изображений, которые, кажется, сидят рядом с моей осью, и изменения размера/позиционирования, которые я делаю на своей оси, я должен отдельно применять к своей коллекции изображений. Это просто не кажется таким элегантным, как правильные образы-как-tick-values-on-my-axis.

Я делаю что-то ужасно неправильно? Кто-нибудь нуждается во мне, чтобы предоставить больше информации?

Еще раз спасибо галям и парням!

ОБНОВЛЕНИЕ. Благодаря @larskotthoff, я добавил следующее:

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

И это (почти) работает! Ну, он показывает изображения, но, как вы можете догадаться, точка начала каждого изображения (т.е. Их верхний левый угол) - это то место, где заканчивается каждый тик, в результате изображение, теперь отображаемое внутри диаграммы, вместо того, галочка:

не может вставлять изображения без достаточного разрешения StackOverflow, поэтому здесь URL: i.stack.imgur.com/s2CX0.png Тик-изображение появляется внутри диаграммы, а не рядом с тиком

Ясно, что мне нужно манипулировать изображениями x и y, но как мне это сделать относительно позиции отдельного тика? Другими словами, как я могу сказать в D3: "Возьмите x, y тика и вычитайте (жестко запрограммированное значение) 150 для обоих, и сделайте это моим новым x, y для моего изображения".

Еще раз спасибо за вашу помощь!

ОБНОВЛЕНИЕ # 2. После того, как вы, наконец, обнаружив this.parentNode и копаясь в нем, я только что узнал, что атрибуты x, y, установленные на изображениях, связанных с моей осью, относительно каждый соответствующий тик! Под этим я подразумеваю, я могу просто добавить:

                    .attr("x", -120)
                    .attr("y", -50);

в качестве дополнительных атрибутов для моих изображений, и он позиционирует их слева от их соответствующих тиков (назад на позицию метки оси, а не сидя поверх диаграммы).

Ответ 1