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

但是我对这种方法的关注是，它不能正确地绑定到轴上，就像正确的刻度值一样;这就像他们只是碰巧坐在我的轴旁边的图像集合，以及我对轴做出的尺寸/定位变化我必须分别应用于我的图像集合。它看起来并不像在我的轴上使用正确的图像作为刻度值一样优雅。

我做错了什么吗？有没有人需要我提供更多信息？

再次感谢gals＆amp;人！

更新：感谢@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，但是如何相对于单个tick的位置呢？换句话说，我怎么说D3：“取两个刻度的x，y并减去（硬编码的值）150，并为我的图像制作新的x，y。“？

再次感谢您的帮助！

UPDATE＃2 ：在最终发现 this.parentNode 并深入研究之后，我刚刚新手发现x，y属性设置在图像当前绑定到我的轴是相对于每个相应的蜱！我的意思是，我可以简单地添加：

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

D3.js：使用图像（数据中指定的文件名）作为轴上的刻度值

1 个答案: