D3.js 使用d3js从笔刷缩放还原到原始图形

我正在使用d3js制作一个简单的图表来合并实时数据。在下面的代码中，我使用模拟数据来呈现图形，因此我可以使用不同的特性来操作图形。我正在使用画笔缩放功能，该功能正在工作，但我无法使用外部重置按钮使图形恢复到原始状态。当我按下重置按钮时，原始图形会渲染，但缩放的部分也会显示出来。请帮帮我，因为我对d3js真的很陌生

var heartData = [{
  time: 0,
  pulse: 50
},{
  time: 1,
  pulse: 100
},{
  time: 2,
  pulse: 0
},{
  time: 3,
  pulse: -100
},{
  time: 4,
  pulse: -25
},{
  time: 5,
  pulse: 25
},{
  time: 6,
  pulse: 0
},{
  time: 7,
  pulse: 100
},{
  time: 8,
  pulse: -50
},{
  time: 9,
  pulse: 25
},{
  time: 10,
  pulse: -25
}];

var w = 600;
var h = 400;

var svg = d3.select('svg').attr("width", w).attr('height', h);

var x = d3.scale.linear()
  .domain([0, 10])
  .range([0, w]);

var y = d3.scale.linear()
  .domain([-150, 150])
  .range([0, h]);

var line = d3.svg.line()
    .x(function(d) { return x(d.time); })
    .y(function(d) { return y(d.pulse); });

svg.append("path")
      .attr("class", "line")
      .style('stroke', 'black')
      .style('stroke-width', '1')
      .style('fill', 'none')
      .datum(heartData)
      .attr("d", line);



// Draw transparent rectangle and zoom on mouseup
var brush = d3.svg.brush()
    .x(x)
    .y(y)
    .on("brushend", function() {
      console.log('brush', brush.extent());
      var extent = brush.extent();
      y.domain([extent[0][1], extent[1][1]]);
      x.domain([extent[0][0], extent[1][0]]);
      svg.select('.line').attr("d", line);
      brush.clear();
      svg.select('.brush').call(brush);
    });

svg.append("g")
  .attr('class','brush')
  .call(brush)
  .selectAll("rect")
  .style('fill-opacity', 0.5)
  .style('fill', 'red');

//Reset to original graph from Zoomed view

function reset (x, y, line){
  x = d3.scale.linear()
  .domain([0, 10])
  .range([0, w]);

  y = d3.scale.linear()
    .domain([-150, 150])
    .range([0, h]);

  line = d3.svg.line()
      .x(function(d) { return x(d.time); })
      .y(function(d) { return y(d.pulse); });

  svg.append("path")
        .attr("class", "line")
        .style('stroke', 'black')
        .style('stroke-width', '1')
        .style('fill', 'none')
        .datum(heartData)
        .attr("d", line);
  }

var d3Brush = this.brush;

function clearBrush(g){
  d3.selectAll("g.brush").call(this.brush.clear());
}


$(document).on('click','#resetbtn', function(e){


    e.preventDefault();

     reset();
     clearBrush();
});

---

重置功能是重新初始化并重新绘制整个图表。你不需要做所有这些；您只需取消缩放，然后重新绘制线条：

function reset() {

  x.domain([0, 10]); // reset x domain

  y.domain([-150, 150]);  // reset y domain

  d3.select('.line')
    .attr("d", line); // redraw line
}

以下是完整的工作代码：

重置 var数据=[{ 时间:0,， 脉搏：50 }, { 时间:1,， 脉搏：100 }, { 时间:2,， 脉搏：0 }, { 时间:3,， 脉搏：-100 }, { 时间:4,， 脉搏：-25 }, { 时间:5,， 脉搏：25 }, { 时间:6,， 脉搏：0 }, { 时间:7,， 脉搏：100 }, { 时间:8,， 脉搏：-50 }, { 时间:9,， 脉搏：25 }, { 时间:10,， 脉搏：-25 }]; var w=600； var h=400； var svg=d3。选择“svg”。属性宽度，w.attr'height'，h； var x=d3.scale.linear .domain[0,10] .范围[0，w]； 变量y=d3.scale.linear .域[-150150] .范围[0，h]； var line=d3.svg.line .X功能{ 返回xd.time； } .功能正常{ 返回码脉冲； }; svg.appendpath .阶级，阶层 .style'stroke'、'black' .样式“笔划宽度”、“1” .样式“填充”、“无” .datumheartData .attrd，行； //绘制透明矩形并在鼠标上缩放 var brush=d3.svg.brush .xx .yy .onbrushend，函数{ console.log'brush'，brush.extent； var-extent=brush.extent； y、 域[范围[0][1]，范围[1][1]； x、 域[范围[0][0]，范围[1][0]]； 选择'.line'.attrd，line； 刷子。清除； 选择'.brush'.callbrush； }; svg.appendg .attr'class'，'brush' .毛刷 .选择全部正确 .样式“填充不透明度”，0.5 .样式“填充”、“红色”； //从缩放视图重置为原始图形 功能复位{ x、 域[0,10]； y、 域[-150150]； d3.选择“.line” .attrd，行； } var d3Brush=this.brush； 函数clearBrushg{ d3.选择allg.brush.callthis.brush.clear； } d3.选择'resetbtn'。单击'click'，函数E{ d3.event.prevent违约； 复位； 透明刷； };

---

这正是我想要的。非常感谢。