私の目標は、d3 を使用して既存の円に画像を追加することです。"fill"
円はレンダリングされ、mouseover メソッドでインタラクティブになりますが、を使用する場合のみ、"color"
のようなより洗練されたものではありません.append("image")
。
g.append("circle")
.attr("class", "logo")
.attr("cx", 700)
.attr("cy", 300)
.attr("r", 10)
.attr("fill", "black") // this code works OK
.attr("stroke", "white") // displays small black dot
.attr("stroke-width", 0.25)
.on("mouseover", function(){ // when I use .style("fill", "red") here, it works
d3.select(this)
.append("svg:image")
.attr("xlink:href", "/assets/images/logo.jpeg")
.attr("cx", 700)
.attr("cy", 300)
.attr("height", 10)
.attr("width", 10);
});
マウスオーバーしても画像が表示されません。私のイメージ「logo.jpeg」がに保存されているRuby on Railsアプリを使用しassets/images/ directory
ます。サークル内にロゴを表示する方法はありますか? ありがとう。