javascript - D3.js:使用图像(在数据中指定文件名)作为轴上的刻度值

Question

我目前有这些数据:

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

复杂的现实世界数据，对吧？当然。好的，我目前使用此 D3.js 代码将“bank”作为轴上的刻度值:

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

但是我对这种方法的担心是它不会像正确的刻度值一样正确绑定(bind)到轴上；就好像它们只是恰好位于我的轴旁边的图像集合，并且我对轴所做的大小/定位更改也必须单独应用于我的图像集合。它看起来不像在我的轴上拥有正确的图像作为刻度值那么优雅。

我做错了什么可怕的事情吗？有人需要我提供更多信息吗？

再次感谢姐妹们!

更新:感谢@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 属性绑定(bind)到我的轴是相对于每个相应的刻度!我的意思是，我可以简单地添加:

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

作为我的图像的附加属性，并将它们定位在各自刻度的左侧(回到轴标签位置，而不是位于图表顶部)。

Answer 1

数据集:

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

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


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