web-dev-qa-db-ja.com

d3 javascriptのサークルオブジェクト内に画像を追加しますか？

私の目標は、d3で既存の円に画像を追加することです。円はレンダリングされ、マウスオーバーメソッドでインタラクティブになりますが、「塗りつぶし」、「色」を使用し、.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);
         });

マウスオーバーした後、画像が表示されません。 Ruby on Rails app、私の画像「logo.jpeg」はassets/images /ディレクトリに保存されています。ロゴを表示するためのヘルプサークル内ですか？ありがとう。

javascriptcssruby-on-railsd3.js
23
DeBraid

Larsがパターンを使用する必要があると言っているように、一度それを行うと、非常に簡単になります。これについては、d3 googleグループの 会話 へのリンクがあります。私は fiddle を設定しました。ここでは、その会話からのパイントの画像と上記のコードを使用します。

パターンを設定するには：

    <svg id="mySvg" width="80" height="80">
      <defs id="mdef">
        <pattern id="image" x="0" y="0" height="40" width="40">
          <image x="0" y="0" width="40" height="40" xlink:href="http://www.e-pint.com/epint.jpg"></image>
        </pattern>
  </defs>

次に、塗りつぶしのみを変更するd3：

svg.append("circle")
         .attr("class", "logo")
         .attr("cx", 225)
         .attr("cy", 225)
         .attr("r", 20)
         .style("fill", "transparent")       
         .style("stroke", "black")     
         .style("stroke-width", 0.25)
         .on("mouseover", function(){ 
               d3.select(this)
                   .style("fill", "url(#image)");
         })
          .on("mouseout", function(){ 
               d3.select(this)
                   .style("fill", "transparent");
         });
31
user1614080