패턴을 사용하여 D3.js의 원에 이미지를 추가하는 방법은 무엇입니까?

D3의 이미지로 강화된 원: 종합 가이드

패턴을 영리하게 사용하면 D3의 원에 이미지를 추가할 수 있습니다. 이 접근 방식을 사용하면 대화형 시각화가 가능해 마우스 오버 이벤트에 이미지가 표시될 수 있습니다.

패턴 설정:

패턴을 생성하려면 SVG 요소. 이 안에 원하는 크기로 ID를 할당합니다. 를 사용하여 이미지를 삽입하세요. 위치와 크기를 지정하는 요소.

D3 구현:

원에 패턴을 적용하려면 URL을 사용하여 원의 채우기 속성을 패턴 ID로 설정하기만 하면 됩니다. () 구문. 그러면 기존 원의 색상이 선택한 이미지로 대체됩니다.

예제 코드:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!