将包含特定数据的鼠标悬停添加到d3.js树映射

// 创建树状数据结构
var data = {
  name: "Root",
  children: [
    { name: "Node 1", value: 10 },
    { name: "Node 2", value: 20 },
    { name: "Node 3", value: 30 }
  ]
};

// 创建树映射布局
var treemap = d3.treemap()
  .size([width, height])
  .padding(1)
  .round(true);

// 转换数据为树映射布局
var root = d3.hierarchy(data)
  .sum(function(d) { return d.value; })
  .sort(function(a, b) { return b.value - a.value; });
treemap(root);

// 创建矩形元素并添加鼠标悬停事件监听器
var nodes = d3.select("svg")
  .selectAll("g")
  .data(root.leaves())
  .enter()
  .append("g")
  .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });

nodes.append("rect")
  .attr("width", function(d) { return d.x1 - d.x0; })
  .attr("height", function(d) { return d.y1 - d.y0; })
  .attr("fill", "steelblue")
  .on("mouseover", function(d) {
    // 在鼠标悬停时执行的操作，例如显示数据信息
    console.log("Hovered node:", d.data.name);
  });

// 添加文本标签
nodes.append("text")
  .attr("x", 5)
  .attr("y", 15)
  .text(function(d) { return d.data.name; });