SVG パターンを使用して、ホバー時に D3 サークルに画像を追加する方法

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

D3 の既存のサークルに画像を追加しようとすると、画像を追加できません。単純な塗りつぶし属性を使用する場合、円のレンダリングとマウスオーバー イベントへの応答にもかかわらず、ホバー後に表示されます。

Toこれを解決するには、SVG のパターンを利用する必要があります。パターンは画像の位置と拡大縮小を定義します。以下に例を示します。

<svg>

D3 では、パターンを使用するように円の塗りつぶしを変更できます。

svg.append("circle")
  .attr("class", "logo")
  .attr("cx", 225)
  .attr("cy", 225)
  .attr("r", 20)
  .style("fill", "transparent") // Make the circle transparent to display the image
  .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");
  });

このコードは、SVG に円を追加し、その塗りつぶしのスタイルを設定します。透明であるため、パターンの画像が見えるようになります。円の上にマウスを置くと塗りつぶしが変化して画像が表示され、マウスアウトすると塗りつぶしが透明に戻ります。

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