D3-v5树形图（Treemap）添加钻取/缩放功能改造咨询

Hey there! Let's walk through how to add zoom/drilldown functionality to your existing D3 v5 treemap without redoing all your custom styling. Here are the key changes you need to make:

1. Add State Tracking for Current Hierarchy #

First, define variables to keep track of the current treemap root and parent levels (so users can navigate back):

let currentRoot;
let parentStack = []; // Stores previous levels for "back" functionality

2. Refactor Drawing Logic into a Reusable Function #

Your original code only handles initial rendering. We'll wrap the treemap drawing into an updateTreemap function so we can redraw when drilling down/up, while preserving your custom styles:

function updateTreemap(root) {
  // Re-calculate treemap layout for the current root
  d3.treemap()
    .size([width, height])
    .padding(4)(root);

  // Update rectangle elements (handle enter/update/exit)
  const rects = svg.selectAll("rect")
    .data(root.leaves());

  rects.enter()
    .append("rect")
    .merge(rects)
    .attr('x', d => d.x0)
    .attr('y', d => d.y0)
    .attr('width', d => d.x1 - d.x0)
    .attr('height', d => d.y1 - d.y0)
    .style("stroke", "black")
    .style("fill", d => {
      // Keep your custom color, or add differentiation for drillable nodes
      return d.children ? "#4a887a" : "#69b3a2"; // Darker shade for non-leaf nodes
    })
    .style("cursor", d => d.children ? "pointer" : "default") // Show hand cursor for drillable nodes
    .on("click", function(event, d) {
      // Drill down when clicking a non-leaf node
      if (d.children) {
        parentStack.push(currentRoot);
        currentRoot = d;
        updateTreemap(currentRoot);
      }
    });

  // Remove rectangles that are no longer needed
  rects.exit().remove();

  // Update text labels (handle enter/update/exit)
  const texts = svg.selectAll("text")
    .data(root.leaves());

  texts.enter()
    .append("text")
    .merge(texts)
    .attr("x", d => d.x0 + 10)
    .attr("y", d => d.y0 + 20)
    .text(d => d.data.name)
    .attr("font-size", "15px")
    .attr("fill", "white");

  // Remove text that's no longer needed
  texts.exit().remove();

  // Toggle back button visibility (see step 4)
  d3.select("#backBtn").style("display", parentStack.length > 0 ? "block" : "none");
}

3. Adjust Initial Data Loading Logic #

Replace your original rendering code with initialization that uses our new function:

d3.csv('your-data-url', function(data) {
  const root = d3.stratify()
    .id(d => d.name)
    .parentId(d => d.parent)(data);
  root.sum(d => +d.value);

  // Set initial state
  currentRoot = root;
  parentStack = [];

  // Draw the initial treemap
  updateTreemap(currentRoot);
});

4. Add a "Back to Parent" Button (Optional but Recommended) #

Let users navigate back up the hierarchy by adding a button to your HTML:

<button id="backBtn" style="display: none; margin: 10px;">Back to Parent Level</button>

Then add this click handler to your JS:

d3.select("#backBtn").on("click", function() {
  if (parentStack.length > 0) {
    currentRoot = parentStack.pop();
    updateTreemap(currentRoot);
  }
});

These changes preserve all your original custom styling (like the #69b3a2 fill color) while adding full drilldown/zoom functionality. The key is reusing your existing rendering code in a reusable update function and tracking the current hierarchy state.

内容的提问来源于stack exchange，提问作者nikhilx