D3.js：使用图像（使用数据中指定的文件名）作为轴上的刻度值
我目前有这个数据：
var dataset = [ { "bank": "Bank 1", "img": "Picture1.png" }, { "bank": "Bank 2", "img": "Picture2.png" }, { "bank": "Bank 3", "img": "Picture3.png" } ]; 复杂的现实世界的数据，对吗？ 当然。 好吧，我目前有“ 银行 ”作为我的轴上的这个D3.js代码的tick值：
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值，而不仅仅是银行值。
起初，我以为这是一个使用axis.tickValues（[值]）与匿名函数引用我的JSON数据中的img值的情况下，但它不起作用。 或者我正在做这个可怕的错误。
然后我认为这是一个使用的情况：
var imgs = svg.selectAll("img").data([dataset]);
但是我对这个方法的担心是这个轴不能正确地绑定，就像正确的刻度值一样， 这就像他们只是坐在我的轴旁边的图像集合，我对我的坐标轴进行调整/定位所做的更改，我必须单独应用于我的图像集合。 它看起来不像在我的轴上具有适当的图像 – 刻度值那么优雅。
我做了什么可怕的错误？ 有没有人需要我提供更多的信息？
再次感谢gals＆guys！
更新 ：感谢@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);
它（几乎）的作品！ 那么它会显示图像，但正如你所猜测的那样，每个图像（即，它们的左上angular）的原点是每个刻度结束的地方，导致图像现在在图内呈现，而不是在图像外面勾号：
不能插入图像没有足够的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);
作为我的图像的附加属性，并将它们放在它们各自的刻度的左侧（返回到轴标签位置，而不是坐在图的顶部）。
数据集：
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);
