D3.js 원을 이미지로 채우는 방법은 무엇입니까?

D3 JavaScript에서 Circle 객체 내에 이미지를 삽입하는 방법은 무엇입니까?

D3 JavaScript에서 기존 Circle 객체 내부에 이미지를 추가하려면 다음이 필요합니다. 단순히 "채우기" 또는 "색상" 속성을 사용하는 것보다 더 미묘한 접근 방식입니다. 이미지 적용시 "append('image')" 방식이 예상대로 작동하지 않습니다.

해결책: 패턴 활용

이 문제를 해결하기 위해 Lars 패턴을 확립해야 한다고 지적했다. 다음 링크는 d3 Google 그룹 포럼에서 이 문제에 관한 통찰력 있는 토론을 제공합니다: [D3 Google 그룹 토론](https://groups.google.com/g/d3-js/c/TPkAqJjjlks).

구현

다음 코드 조각은 SVG에서 패턴을 설정합니다. 요소:

<svg></svg>

D3 스크립트 내에서 "채우기" 속성은 다음과 같이 조정됩니다.

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 원을 이미지로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!