如何用圖片填滿 D3.js 圓圈？

如何在 D3 JavaScript 中將影像嵌入圓形物件內？

在 D3 JavaScript 中，在現有圓形物件內添加圖像需要比簡單地使用「填充」或「顏色」屬性更細緻的方法。應用影像時，「append('image')」方法無法如預期般運作。

解決方案：利用模式

要解決此問題，Lars指出需要建立模式。以下連結在 d3 Google 群組論壇上提供了有關此問題的深入討論：[D3 Google 群組討論](https://groups.google.com/g/d3-js/c/TPkAqJjjlks)。

實作

以下程式碼片段在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中文網其他相關文章！