Question

我有类似

的东西

var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var babel = require("gulp-babel");
var webpack = require("webpack");
var webpack_options = require('./webpack.config');
var server;

gulp.task('bundle', function(cb) {
  var compiler = webpack(webpack_options);
  var first = true;

  compiler.watch({}, function(err, stats) {
    if (err) {
      console.warn(err);
    }
    console.warn('Bundle ran ' + new Date());

    if (first) {
      cb();
      first = false;
    }
  });
});

gulp.task('transpile', function(cb) {
  gulp.src("src/**/*.js")
  .pipe(babel())
  .pipe(gulp.dest("dist"))
  .on('end', function() {
    if (server) {
      server.restart();
    }

    cb();
  })
});

gulp.task('default', ['bundle', 'transpile'], function() {
  gulp.watch('src/**/*', ['transpile']);

  server = nodemon({
    script: 'dist/server/init.js',
    // Make nodemon stop actively monitoring for manual restarts when needed
    ext: 'fakefake',
    env: { 'NODE_ENV': 'development' }
  })

});

我似乎无法直接根据缩放行为调用translateBy，还有其他方法可以应用translateBy吗？

Answer 1

这假设您正在使用d3 v4

以下是this relevant example

中初始化缩放行为的方法

var zoom = d3.zoom()
  .on("zoom", zoomed)

canvas
  .call(zoom.transform, transform)

为了揭开神秘面纱，最后一行也可以这样写：

zoom.transform(canvas, transform)

transform是一个由您提供的功能。由于调用了这个函数并使用了它的返回值，你也可以像这样重写它：

zoom.transform(canvas, d3.zoomIdentity.translate(...) /* and .scale(...) etc */)

这是应用转换的最低级别方式。

为方便起见，您可以更简单地使用zoom.transform代替zoom.translateBy，（如上所述内部调用zoom.transform）

var zoom = d3.zoom()
  .scaleExtent([1, Infinity])
  .translateExtent([[0, 0], [width, height]])
  .on('zoom', handleZoom)

zoomable.call(zoom.translateBy, initialX, initialY)

或者，可以重写最后一行：

zoom.translateBy(zoomable, initialX, initialY)

在这两种情况下，都会涉及zoomable，因为zoom并未保持自己的翻译和缩放状态。该状态存储在正在转换的元素上，即zoomable。

Answer 2

这就是你应用相对翻译和缩放后的方法，在这个例子中我使用Mousetrap来附加键盘事件以允许缩放和平移。

transform = d3.zoomTransform(zoomable.node());

Mousetrap.bind(['=', '+', 'pageup'], function() {
    zoomable.call(zoom).call(zoom.scaleTo, transform.k << 1);
});
Mousetrap.bind(['-', 'pagedown'], function() {
    zoomable.call(zoom).call(zoom.scaleTo, transform.k >> 1);
});

Mousetrap.bind(['down'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            0, // / transform.k, 
            -50 / transform.k
        ); 
});
Mousetrap.bind(['up'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            0,
            +50 / transform.k
        ); 
});
Mousetrap.bind(['left'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            +50 / transform.k, 
            0
        ); 
});
Mousetrap.bind(['right'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            -50 / transform.k, 
            0
        ); 
});

我可以使用zoom.translateBy来设置初始平移吗？

2 个答案: