D3.js を使用して円の中に画像を埋め込むにはどうすればよいですか?

d3.js を使用して円オブジェクト内に画像を表示する

d3.js を使用して円オブジェクト内に画像を追加するには、次の方法を使用します。パターン。最初のクエリで示されているように、「塗りつぶし」や「色」などの属性を使用した円の単純なレンダリングは簡単です。ただし、画像などのより複雑な要素を組み込むには、別のアプローチが必要です。

円の中に画像を表示するには、パターン タグを使用します。このタグを使用すると、塗りつぶしまたはストロークとして適用できる繰り返しグラフィック要素を定義できます。 pattern タグ内では、表示する画像とその位置を指定する image 要素が定義されます。

以下は、パターンを使用して画像を追加する例を示しています。 Circle:

HTML:

<svg></svg>

d3.js:

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

このコードでは、パターンHTML ドキュメント内で定義された要素は、circle 要素の「fill」属性内の id によって参照されます。マウスオーバーイベントが発生すると、塗りつぶしがパターンのURLに変更され、画像が表示されます。

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