Question

fiddler link is = http://jsfiddle.net/2hfx3/61/

I'm using D3.js line chart i just want to place image on y-axis here is my code snipped where image are placed on x-axis but when i try to change xAxis to yAxis happened nothing. Please help.

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

这是一个纠正的小提琴：this MSDN article

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

以下是您可以做的事情：

1）在yAxis中添加与数据中的项目一样多的刻度

2）将您的数据更改为与yAxis中的刻度一样多的项目

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

Place image on Y-axis labels in Line chart

1 个答案: