使用 d3 自定义可缩放的冰柱

问：

我想在可缩放的 Icicle 的每个单元格中添加一个图像和一个文本区域。

我尝试过使用将文本框和图像放在单元格上cell.append

// Add an image to each cell
const image  = cell.append("image")
   .attr("xlink:href", "/fileV.jpg") // Change the path to your image
   .attr("width", 100)  // Adjust the width of the image
   .attr("height", 100)  // Adjust the height of the image
   .attr("x",20)
   .attr("y",300)
   .classed("img", true);

// Add a text area to each cell
const textarea = cell.append("foreignObject")
   .attr("width", 500)  // Adjust the width of the text area
   .attr("height", 100)  // Adjust the height of the text area
   .attr("x",20)
   .attr("y",1200/2)
   .append("xhtml:textarea")
   .on("blur", function(event, d) {
      // Add your onblur logic here
      console.log("Textarea blur event:", d.data.name, "value", event.target.value);
    });

但问题是，其他集群文本区域和图像显示在当前集群上。 有没有更清洁的方法可以在 icicle svg 上附加元素？我还可以以某种方式显示当前的集群图像和文本区域吗？ 这是我从现在开始尝试过的存储库链接 Repo Link