问使用d3js从画笔缩放恢复到原始图形
EN

Stack Overflow用户

提问于 2015-10-12 14:29:12

回答 1查看 616关注 0票数 0

我正在编写一个简单的图表，以便使用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();
});

d3.js

reset

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-12 17:49:18

您的重置功能是重新初始化和重新绘制整个图表。你不需要做所有的事情，你只需要“取消缩放”，然后重新画线：

function reset() {

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

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

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

以下是完整的工作代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <button id="resetbtn">Reset</button>
    <svg width="500" height="500"></svg>
    <script>
    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.domain([0, 10]);

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

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

    var d3Brush = this.brush;

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


    d3.select('#resetbtn').on('click', function(e) {


      d3.event.preventDefault();

      reset();
      clearBrush();
    });
  
  </script>
  </body>

</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33083689

复制

相似问题

问使用d3js从画笔缩放恢复到原始图形
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用d3js从画笔缩放恢复到原始图形EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用d3js从画笔缩放恢复到原始图形
EN