23

私の目標は、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ます。サークル内にロゴを表示する方法はありますか? ありがとう。

4

2 に答える 2

1 
nodeEnter.append("svg:image")
            .attr('x',-9)
            .attr('y',-12)
            .attr('width', 20)
            .attr('height', 24)
            .attr("xlink:href", function(d) { 
         if(d.type=="root"){
            return "resources/images/test.png";}
            else if(d.type.toLowerCase()=="A"){
                return "resources/icon01/test1.png";}
            else if(d.type=="B"){
                return "resources/icon01/test2.png";}
            })
            .append("svg:title")
              .text(function(d){
              if(d.type=="root"){
                return "Root Name:"+d.name;}
              else if(d.type=="test"){
                return "Name:"+d.name;}
            });
于 2014-01-09T06:18:24.773 に答える