D3.js堆叠柱状图Y轴网格线样式及交互修复需求

Let's walk through solving your two core requirements while getting the hover interaction back on track—no more broken hover states, and grid lines that behave exactly as you want.

1. Style Grid Lines & Preserve Y-Axis Appearance #

The key here is to separate the grid from your main Y-axis. This way, you can style the grid independently without messing with the axis's black ticks and line.

Step 1: Add the Grid CSS #

First, drop this CSS in your stylesheet—it targets only the grid lines with your specified styles:

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

/* Hide the grid's own axis line and ticks (we'll use the main Y-axis for those) */
.grid .domain, .grid .tick line {
  display: none;
}

/* Ensure main Y-axis stays black */
.y-axis line, .y-axis path {
  stroke: black;
}

Step 2: Generate Grid Lines That Stop at the Last Bar #

Instead of drawing full-width grid lines, calculate the right edge of your last bar and use that to limit the grid's length. Add this code before you render your bars (critical for hover to work):

// Assume you have these defined already:
const svg = d3.select("svg");
const xScale = d3.scaleBand()...; // Your category scale
const yScale = d3.scaleLinear()...; // Your value scale

// Calculate the right edge of the final bar
const lastBarRight = xScale(xScale.domain().slice(-1)[0]) + xScale.bandwidth();

// Create grid group (positioned to align with your Y-axis)
svg.append("g")
  .attr("class", "grid")
  .attr("transform", `translate(${xScale.range()[0]}, 0)`)
  .call(d3.axisLeft(yScale)
    .tickSize(-(lastBarRight - xScale.range()[0])) // Lines stop at last bar
    .tickFormat("") // Hide grid tick labels
  );

2. Fix Hover Interaction #

The #1 reason hover breaks after adding grid lines is that the grid is drawn on top of the bars, blocking mouse events. SVG renders elements in the order you add them—so:

• Add the grid group before you add your bar elements. This puts the grid behind the bars, letting hover events reach the bars directly.
• Double-check your bar elements don't have pointer-events: none set (that would block hover regardless of layer order).

Full Example Snippet #

Here's how the code flow should look to tie everything together:

/* Your styles */
.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid .domain, .grid .tick line {
  display: none;
}

.y-axis line, .y-axis path {
  stroke: black;
}

.bars rect {
  transition: opacity 0.2s;
}

.bars rect:hover {
  opacity: 0.8; /* Example hover effect */
}

// Setup SVG and scales
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const svg = d3.select("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

// Define your scales (adjust based on your data)
const xScale = d3.scaleBand()
  .domain(["Category 1", "Category 2", "Category 3"])
  .range([margin.left, width + margin.left])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([height + margin.top, margin.top]);

// Add grid FIRST (behind bars)
const lastBarRight = xScale(xScale.domain().slice(-1)[0]) + xScale.bandwidth();
svg.append("g")
  .attr("class", "grid")
  .attr("transform", `translate(${margin.left}, 0)`)
  .call(d3.axisLeft(yScale)
    .tickSize(-(lastBarRight - margin.left))
    .tickFormat("")
  );

// Add bars (now on top of grid)
const bars = svg.append("g")
  .attr("class", "bars")
  .selectAll("rect")
  .data(yourStackedData)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.category))
  .attr("y", d => yScale(d.y1))
  .attr("height", d => yScale(d.y0) - yScale(d.y1))
  .attr("width", xScale.bandwidth())
  .on("mouseover", function() {
    d3.select(this).style("opacity", 0.8);
  })
  .on("mouseout", function() {
    d3.select(this).style("opacity", 1);
  });

// Add main Y-axis
svg.append("g")
  .attr("class", "y-axis")
  .attr("transform", `translate(${margin.left}, 0)`)
  .call(d3.axisLeft(yScale));

Quick Troubleshooting #

If hover still isn't working:

• Inspect your SVG in dev tools to confirm bars are rendered after the grid group.
• Make sure bar elements don't have pointer-events: none in their styles.
• Verify your hover event listeners are attached directly to the <rect> elements of the bars.

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