d3事件问题与角2打字稿

我想在d3中包含缩放和平移功能。它在JavaScript中工作，但在打字稿中出错。 d3.event.translate和d3.event.scale不在angular2打字稿工作d3事件问题与角2打字稿

this.svg = this.host.append('svg') 
     .attr('width', this.width) 
     .attr('height', this.height) 
     .style({ 'float': 'right' }) 
     .attr("pointer-events", "all") 
     .call(d3.behavior.zoom().on("zoom", redraw)) 
     .append('svg:g'); 

     function redraw() { 
     this.svg.attr("transform", 
      "translate(" + d3.event.translate + ")" 
      + " scale(" + d3.event.scale + ")"); 
     }

显示此错误控制台上。

Property 'translate' does not exist on type 'Event | BaseEvent'. Property 'scale' does not exist on type 'Event | BaseEvent'.

来源

2017-04-27 Awais Khan

是否使用'（ d3.event）.translate'和'（ d3.event）.scale'工作？（不建议你这样使用它们） – mkaran

这是一个转译错误还是当你运行脚本？如果第二个，请检查您的d3版本。 – mkaran

不给以前的错误，但给一个新的无法读取未定义的属性'attr' –

@ mkaran的回答是有效的，而是打败了打字稿的目的。这里的合适演员阵容：

function redraw() { 

    let e = (<d3.ZoomEvent> d3.event); 

    this.svg.attr("transform", 
    "translate(" + e.translate + ")" 
    + " scale(" + e.scale + ")"); 
}

由于目的打字稿是类型，诉诸any被认为是不好的做法*。

你也应该尝试避免内联函数，而是使用你的类的正确方法。但是，这是另一天的问题...

_{*有时它只是更容易:)}

来源

2017-04-27 11:29:37 Mark

+1''只是建议作为故障排除步骤:)它永远不应该被用作永久性解决方案。 – mkaran

你有一个问题，你的this

.call(d3.behavior.zoom().on("zoom", redraw)) 
     .append('svg:g'); 

     function redraw() { 
     this.svg.attr("transform", 
      "translate(" + d3.event.translate + ")" 
      + " scale(" + d3.event.scale + ")"); 
     }

范围应该是这样的：

.call(d3.behavior.zoom().on("zoom", redraw.bind(this))) //<-- bind the outer this here 
     .append('svg:g'); 

     function redraw() { 
     this.svg.attr("transform", 
      "translate(" + d3.event.translate + ")" 
      + " scale(" + d3.event.scale + ")"); 
     }

或与es6箭头语法：

.call(d3.behavior.zoom().on("zoom",()=> redraw())) //<-- arrow syntax 
     .append('svg:g'); 

     function redraw() { 
     this.svg.attr("transform", 
      "translate(" + d3.event.translate + ")" 
      + " scale(" + d3.event.scale + ")"); 
     }

来源

2017-04-27 11:32:27 echonax

d3事件问题与角2打字稿

回答

相关问题