d3 v4使用TypeScript拖放

Question

我正在使用D3庫v4和Angular2，我想拖放svg元素。我有一個代碼：

item.call(
    d3.drag() 
     .on("start", dragStarted) 
     .on("drag", dragged) 
     .on("end", dragEnded) 
); 

和

function dragStarted(d) { 
    d3.select(this).raise().classed("active", true); 
} 

function dragged(d) { 
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); 
} 

function dragEnded(d) { 
    d3.select(this).classed("active", false); 
} 

我得到這個錯誤：

TS2345: Argument of type 'DragBehavior' is not assignable to parameter of type '(selection: Selection, ...args: any[]) => void'. Types of parameters 'selection' and 'selection' are incompatible. Type 'Selection' is not assignable to type 'Selection'. Type 'BaseType' is not assignable to type 'Element'. Type 'EnterElement' is not assignable to type 'Element'. Property 'classList' is missing in type 'EnterElement'.

任何想法？

Answer 1

我試圖使用來自this sample的代碼，但它顯示相同的錯誤。 我用另一種方式寫它：

svg.selectAll("circle") 
    .data(circles) 
    .enter().append("circle") 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", radius) 
    .style("fill", 'blue'); 

svg.selectAll("circle").call(d3.drag().on("start", dragstarted) 
    .on("drag", dragged) 
    .on("end", dragended)); 

它適用於我。

Answer 2

請參閱我的回答，以迴應類似SO問題帖子here。

它解釋了確保拖動行爲及其操作的選擇具有兼容的底層元素類型和綁定數據類型的必要性和方法。

按照您的情況調整後的步驟將解決該問題。