D3.js SVG パターンを使用して円内に画像を埋め込む方法

D3.js で SVG パターンを使用して円に画像を追加する

D3.js ビジュアライゼーションでは、円オブジェクト内に画像を追加するには、以下を使用します。

パターンを定義するには、 を使用するだけです。 内のタグ要素。ここでは、パターンのサイズを設定し、 を使用して画像の URL を指定します。

<svg>

D3 スクリプトで、パターンの URL を 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 では、SVG パターンとイベント処理を組み合わせることで、円オブジェクト内に画像を動的に表示できるインタラクティブな視覚化が可能になります。

以上がD3.js SVG パターンを使用して円内に画像を埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。