刷子移动时如何处理填充物

Question

使用d3.brush时遇到问题。the problem 该图形超出了限制。

相关代码（var xScale用于较大的图形，xScale_用于具有画笔的图形）：

  var template = {
    width: '1200',
    height: '520',
    padding: 20,
    xScaleTick: 50,
    yScaleTick: 20
  };

 function initScale(dataset) {
    xScale = d3
      .scaleLinear()
      .domain([1, dataset[dataset.length - 1]['chapter']])
      .range([template.padding, template.width -  2*template.padding]);

    xAxis = d3
      .axisBottom()
      .scale(xScale)
      .ticks(template.xScaleTick);
  }

xScale_ = d3
  .scaleLinear()
  .domain([1, dataset[dataset.length - 1]['chapter']])
  .range([template.padding, template.width - 2 * template.padding]);

xAxis_ = d3
  .axisBottom()
  .scale(xScale_)
  .ticks(template.xScaleTick);

   var brush = d3
  .brushX()
  .extent([[xScale_(1), 0], [timeline.width, timeline.height]])
  .on('brush', brushed);

$timeline
  .append('g')
  .attr('class', 'brush')
  .call(brush)
  .call(brush.move, xScale_.range().map(value => value / 2));

 function brushed() {

    var s = d3.event.selection || xScale_.range();
    var smap = s.map(xScale_.invert,xScale_);
    xScale.domain(smap).nice();

    xAxis = d3
      .axisBottom()
      .scale(xScale)
      .ticks(template.xScaleTick);
    $chart
      .selectAll('g.area')
      .select('path')
      .attr('d', area)
      .attr('transform', 'translate(' + template.padding + ',0)');
    $chart.select('g.x').call(xAxis);
  }

我认为也许我以错误的方式进行了图形填充，但是我不知道如何解决。 感谢您的帮助。或者任何相关示例都将有所帮助。

Answer 1

我不知道是否有更好的解决方案。我只是附加了一个“矩形”以使零件超出限制。 对不起，我的英语不好。

Answer 2

请参见以下示例：Zoomable Area

您可以定义clipPath来将图形裁剪到所需的区域。示例中的代码：

var areaPath = g.append("path")
    .attr("clip-path", "url(#clip)")
    .attr("fill", "steelblue");

g.append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);