D3.js の円を画像で埋めるにはどうすればよいですか?

D3 JavaScript の Circle オブジェクト内に画像を埋め込む方法?

D3 JavaScript で、既存の Circle オブジェクト内に画像を追加するには、単純に「fill」または「color」属性を使用するよりも、より微妙なアプローチです。画像を適用するときに、「append('image')」メソッドが期待どおりに機能しません。

解決策: パターンの利用

この問題を解決するには、Lars が行います。パターンを確立する必要があると指摘した。次のリンクでは、d3 Google グループ フォーラムでこの問題に関する洞察に富んだディスカッションが提供されています: [D3 Google グループ ディスカッション](https://groups.google.com/g/d3-js/c/TPkAqJjjlks).

実装

次のコード スニペットは、SVG でパターンを設定します。 element:

<svg>

D3 スクリプト内で、「fill」属性は次のように調整されます:

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

このようにして、マウスオーバー時に円が画像で塗りつぶされます。

以上がD3.js の円を画像で埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。