D3.js刷选缩放时SVG路径超出图表区域问题求助

I see you're running into an issue where parts of your line chart are drawing outside the chart boundaries when using brush and zoom. Let's break down what's causing this and fix it step by step.

Key Issues Behind the Problem #

1. Misplaced Brush Container: You added the brush to the root <svg> element instead of the translated <g> that holds your chart content. This means the brush's coordinates don't align with your chart's plotting area (which has margins applied).
2. No Clip Path: Without a clip path, the line can draw beyond the bounds of your plotting area when zoomed in.
3. Incorrect Domain Adjustments: The arbitrary -40 offsets in your brush selection handling are throwing off the scale domains, leading to misaligned zoom ranges.

Fixed Implementation #

Let's apply the fixes one by one, then show the full corrected code:

First, add a clip path to constrain the line within the plotting area:

// Add this right after creating the translated chart group
g.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

Next, attach the brush to the translated <g> instead of the root SVG, so its coordinates match the chart's plotting area:

// Replace the svg.append('g') for brush with this
g.append('g')
 .attr('class', 'brush')
 .call(brush);

Fix the domain calculation in brushended to use the brush selection correctly:

function brushended() {
  var s = d3.event.selection;
  if (!s) {
    if (!idleTimeout) {
      return (idleTimeout = setTimeout(idled, idleDelay));
    }
    x.domain(x0);
    y.domain(y0);
  } else {
    // Map brush selection directly to scale domains
    x.domain([x.invert(s[0][0]), x.invert(s[1][0])]);
    y.domain([y.invert(s[1][1]), y.invert(s[0][1])]);
    g.select('.brush').call(brush.move, null);
  }
  zoom();
}

Update the line to use the clip path:

g.append('path')
 .attr('class', 'line')
 .datum(data)
 .attr('fill', 'none')
 .attr('stroke', 'steelblue')
 .attr('clip-path', 'url(#clip)') // Apply clip path
 .attr('d', line);

Adjust the zoom function to select elements from the translated <g>:

function zoom() {
  var t = svg.transition().duration(750);
  g.select('.axis--x')
   .transition(t)
   .call(xAxis);
  g.select('.axis--y')
   .transition(t)
   .call(yAxis);
  g.select('.line')
   .transition(t)
   .attr('d', line);
}

Full Corrected Code #

<!DOCTYPE html>
<html>
<head>
  <style>
    .chart {
      border: 1px solid #bdbdbd;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <script src="https://unpkg.com/d3@4.12.2/build/d3.min.js"></script>
  <script>
    var svg = d3
     .select('body')
     .append('svg')
     .attr('class', 'chart')
     .attr('width', 960)
     .attr('height', 500);
    var margin = { top: 40, right: 40, bottom: 40, left: 40 };
    var width = +svg.attr('width') - margin.left - margin.right;
    var height = +svg.attr('height') - margin.top - margin.bottom;
    var g = svg
     .append('g')
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
    
    // Add clip path to constrain line to plotting area
    g.append("defs").append("clipPath")
        .attr("id", "clip")
      .append("rect")
        .attr("width", width)
        .attr("height", height);

    var timeParser = d3.timeParse('%Y-%m-%d');
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
    var brush = d3.brush().on('end', brushended);
    var idleTimeout;
    var idleDelay = 350;
    var x0;
    var y0;
    var xAxis;
    var yAxis;
    var line = d3
     .line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.price); })
     .curve(d3.curveNatural);
    var start = new Date();
    var end = new Date(start.toDateString());
    start.setFullYear(end.getFullYear() - 1);
    var startStr = start.toISOString().slice(0, 10);
    var endStr = end.toISOString().slice(0, 10);
    var url = "https://api.coindesk.com/v1/bpi/historical/close.json?start=" + startStr + "&end=" + endStr;
    d3.json(url, function(error, response) {
      var data = Object.keys(response.bpi).map(function(date) {
        return { date: timeParser(date), price: response.bpi[date] };
      });
      x0 = d3.extent(data, function(d) { return d.date; });
      y0 = d3.extent(data, function(d) { return d.price; });
      x.domain(x0);
      y.domain(y0);
      xAxis = d3.axisBottom(x);
      yAxis = d3.axisLeft(y);
      g
       .append('g')
       .attr('class', 'axis axis--x')
       .attr('transform', 'translate(0,' + height + ')')
       .call(xAxis);
      g
       .append('g')
       .attr('class', 'axis axis--y')
       .call(yAxis);
      g
       .append('path')
       .attr('class', 'line')
       .datum(data)
       .attr('fill', 'none')
       .attr('stroke', 'steelblue')
       .attr('clip-path', 'url(#clip)') // Apply clip path
       .attr('d', line);
      // Attach brush to the translated chart group
      g
       .append('g')
       .attr('class', 'brush')
       .call(brush);
    });
    function brushended() {
      var s = d3.event.selection;
      if (!s) {
        if (!idleTimeout) {
          return (idleTimeout = setTimeout(idled, idleDelay));
        }
        x.domain(x0);
        y.domain(y0);
      } else {
        // Correct domain mapping from brush selection
        x.domain([x.invert(s[0][0]), x.invert(s[1][0])]);
        y.domain([y.invert(s[1][1]), y.invert(s[0][1])]);
        g.select('.brush').call(brush.move, null);
      }
      zoom();
    }
    function idled() {
      idleTimeout = null;
    }
    function zoom() {
      var t = svg.transition().duration(750);
      g.select('.axis--x')
       .transition(t)
       .call(xAxis);
      g.select('.axis--y')
       .transition(t)
       .call(yAxis);
      g.select('.line')
       .transition(t)
       .attr('d', line);
    }
  </script>
</body>
</html>

Why These Fixes Work #

• Clip Path: The clipPath element ensures any part of the line that would draw outside the plotting area gets clipped, so it never appears beyond the chart's bounds.
• Brush Placement: Attaching the brush to the translated <g> aligns its coordinate system with your chart's plotting area, making selections match exactly what you see.
• Corrected Domain Calculation: Removing the arbitrary offsets fixes misalignment between the brush selection and scale domains, ensuring zoom focuses precisely on your selected area.

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