javascript - 将图像放置在折线图中的 Y 轴标签上

Question

fiddler 链接是 = http://jsfiddle.net/2hfx3/61/

我正在使用 D3.js 折线图，我只想将图像放置在 y 轴上，这是我的代码，其中图像放置在 x 轴上，但是当我尝试将 xAxis 更改为 yAxis 时，什么也没发生。请帮忙。

svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis)
.selectAll(".tick").each(function(d,i){        
    d3.select(this)
      .append('image')
      .attr('xlink:href', data[i].img)
      .attr('x',0)
      .attr('width',128)
      .attr('height',128);
});

Answer 1

这是一个更正的 fiddle :http://jsfiddle.net/2hfx3/104/

问题很简单，数据中有 12 个项目，但 y 轴上有 14 个刻度。发生错误的原因是，当它在第 13 个刻度上加载图像时，它试图加载不存在的第 13 个项目，因此它们是一个错误，并且您的折线图停止绘制。

您可以执行以下操作:

1) 在 y 轴上添加与数据中的项目一样多的刻度

2) 更改您的数据，使其包含与 y 轴中的刻度数一样多的项目

3)直接加载图像而不读取数据，如下所示:(我还修改了图像的x和y坐标以匹配您的示例)

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll(".tick").each(function(d,i){        
    d3.select(this)
      .append('image')
      .attr('xlink:href', img)
      .attr('x',0 - 128)
      .attr('y',0 - 128)
      .attr('width',128)
      .attr('height',128);
});