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

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

Here's a corrected fiddle : http://jsfiddle.net/2hfx3/104/

The problem is simple, their is 12 items in your data but their is 14 ticks on your yAxis. The error happens because when it is loading the image on the 13th tick, it is trying to load the 13th item which does not exist so their is an error and your Line Chart stop drawing.

Here's what you can do :

1) Append as many ticks in your yAxis as you have items in your data

2) Change your data to have as many items as there is ticks in your yAxis

3) Load directly the image without reading data, like this: (I also modified x and y coordinates of the image to match your example)

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