置き画像は

Question

シオマネキリンクはこちらの画像が配置されている切り取ら私のコードは、私はちょうどy軸上に画像を配置したいD3.jsの折れ線グラフを使用しています= http://jsfiddle.net/2hfx3/61/

です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

がここに訂正さフィドルです：http://jsfiddle.net/2hfx3/104/

問題は簡単です、あなたのデータでは12の項目彼らですが、あなたのY軸上の14ティックは、彼らのです。エラーが発生するのは、13th目盛りに画像をロードするときに、存在しない13番目の項目をロードしようとしているためにエラーが発生し、折れ線グラフが停止しているためです。

はここで何ができるかです：

1）あなたは、データ内の項目

2を持っているとして、あなたのY軸のように多くのダニを追加）ティックがある限り多くのアイテムを持っているあなたのデータを変更しますあなたのY軸に直接

3）ロード画像のように、データを読み出すことなく：（Iも変更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); 
});