D3.js를 사용하여 서클 안에 이미지를 삽입하려면 어떻게 해야 하나요?

d3.js를 사용하여 원 개체 내에 이미지 표시

d3.js를 사용하여 원 개체 내에 이미지를 추가하는 것은 다음을 활용하여 수행할 수 있습니다. 패턴. 초기 쿼리에 표시된 대로 "채우기" 및 "색상"과 같은 속성을 사용하여 원을 간단하게 렌더링하는 것은 간단합니다. 그러나 이미지와 같이 더 복잡한 요소를 통합하려면 다른 접근 방식이 필요합니다.

원 안에 이미지를 표시하려면 패턴 태그가 사용됩니다. 이 태그를 사용하면 채우기 또는 획으로 적용할 수 있는 반복되는 그래픽 요소를 정의할 수 있습니다. 패턴 태그 내에는 표시할 이미지와 위치를 지정하는 이미지 요소가 정의됩니다.

다음은 패턴을 사용하여 이미지를 추가하는 방법을 보여주는 예입니다. 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 문서에 정의된 요소는 원 요소의 "fill" 속성 내 ID로 참조됩니다. 마우스 오버 이벤트가 발생하면 채우기가 패턴의 URL로 변경되어 이미지가 표시됩니다.

위 내용은 D3.js를 사용하여 서클 안에 이미지를 삽입하려면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!