パターンを使用して D3.js のサークルに画像を追加する方法

D3 の画像で強化されたサークル: 総合ガイド

D3 のサークルに画像を追加するには、パターンを賢く使用します。このアプローチにより、インタラクティブな視覚化が可能になり、マウスオーバー イベントで画像を表示できるようになります。

パターンの設定:

パターンを作成するには、SVG を使用します。要素。この中で、 を定義します。必要な寸法を指定し、ID を割り当てます。 を使用して画像を埋め込みます。

D3 実装:

パターンを円に適用するには、URL を使用して円の fill 属性をパターンの ID に設定するだけです。 () 構文。これにより、既存の円の色が選択した画像に置き換えられます。

コード例:

<svg></svg>

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

このコードでは、円は最初は透明な塗りつぶしを持ちます。 。マウスオーバーすると、塗りつぶしが画像 ID のパターンに変更され、円の中に画像が表示されます。

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