d3.drag() in Angular2

Question

Kann immer noch nicht herausfinden, wie d3.drag() in Angular2 Komponente zu verwenden.

Versuch:

d3.selectAll(".node").call(d3.drag().on("start", started)); 

Aber immer "Ungelöste Funktion oder Methode drag()".

Ich habe d3 installiert, es funktioniert recht gut. Ich habe d3 mit Import * als d3 von 'd3' importiert. Hier ist ein Beispiel von meinem Code:

import {Component, OnInit} from '@angular/core'; 
import * as d3 from 'd3'; 
// some other imports 

@Component({ 
    selector: 'model-detail-d3', 
    inputs: ['modelData'], 
    templateUrl: 'app/shared/templates/d3.html', 
    //styleUrls: ['app/replication-model/d3.css'] 
    providers: [DataModel] 
}) 
export class ModelDetailD3Component implements OnInit { 

    private modelData : ModelData; 

    constructor(private someModel: SomeModel) { 
     this.someModel= someModel; 
    } 

    ngOnInit() { 

     this.someModel.setInstanceData(this.modelData); 

     var someItems: someItems[]; 
     someItems = []; 
     if (this.someModel.getInstances()) someInstances = this.someModel.getInstances(); 

     // d3 container 
     var svgContainer = d3.select("#d3-model") 
      .append("svg") 
      .attr("width", 600) 
      .attr("height", 300); 

     var d3Items = svgContainer.selectAll("rect") 
      .data(someInstances) 
      .enter() 
      .append("rect"); 


     var defaultX = 10; 
     var defaultY = 10; 
     var spiAttributes = spiItems 
      .attr("x", function (spiItem, i) { return 10 + (someItem.d3.x || 10*i*defaultX); }) 
      .attr("y", function (spiItem, i) { return 10 + (someItem.d3.y || 10*i*defaultY); }) 
      .attr("height", function (someItem) { return (50); }) 
      .attr("width", function (someItem) { return (80); }) 
      .style("fill", function(someItem) { return "red"; }) 
      // Add event to each item 
      .on('mouseover', (someItem) => { 
       this.onMouseOn(someItem); 
      }) 
      .on('mouseout', (someItem) => { 
       this.onMouseOut(); 
      }) 
      .append('rect'); 

     // HERE IS THE PROBLEM: "Unresolved function or method drag()" 
     svgContainer 
      .call(d3.drag() 
       .container(svgContainer) 
       .on("start", dragstarted) 
       .on("drag", dragged) 
       .on("end", dragended)); 

     // d3.selectAll("rect").call(d3.drag().on("start", started)); 
    }; 

So kann ich D3 in Angular2 verwenden, um einige Elemente zu ziehen nach einigen Daten, aber ich bin nicht in der Lage ein bestimmtes Verhalten als Widerstand oder Zoom zu machen, auch wenn es funktioniert in einigen js Beispielen wie hier http://bl.ocks.org/enjalot/1378144 oder https://bl.ocks.org/mbostock/6123708, aber nicht in Angular2.

Answer 1

So habe ich nicht herausgefunden, wie die Funktion Drag() zu verwenden, von D3 in Angular2 mit Version 4 von D3, aber es funktioniert gut mit Version 3 von D3.

Answer 2

Um d3.drag() verwenden Sie das d3-drag Paket installieren:

npm install d3-drag 

Answer 3

Ein Beispiel für die Verwendung von d3-drag in einer Komponente finden Sie unter drag-zoom-2 Angular component example. Während das Beispiel d3-ng2-service verwendet, sollte es Ihnen eine grundlegende Idee geben:

• Verwendung ein Service-Zugriff auf d3 zu bekommen, könnte dies möglicherweise Ihre eigenen Kunden
• die Rückrufe erstellen Sie müssen für d3-drag Event-Handling,
• Hängen Sie die Ereignishandler in die entsprechenden Angular Lifecycle Hooks ein.

Als wichtige Überlegung, beachten Sie, dass durch Design, das this Rahmen eines d3-drag Rückruf das ausgewählte Element ist, nicht der this Umfang Ihrer Angular Komponente! Wenn Sie im Callback Zugriff auf Mitglieder der Angular-Komponente benötigen, verwenden Sie einen Drag-Ereignishandler, der von einer Closure zurückgegeben wird, die Ihnen den Zugriff auf die Angular-Komponente ermöglicht.

Dies könnte bedeuten, eine private Angular Komponentenmethode hinzufügen, wie:

private getDragHandler() { 
    const self = this; 
    return function dragged(this: SVGCircleElement, d: PhyllotaxisPoint) { 
    let e: D3DragEvent<SVGCircleElement, PhyllotaxisPoint, PhyllotaxisPoint> = d3.event; 

    // Use self.foo to access the foo member of the Angular component. 

    d3.select(this).attr('cx', d.x = e.x).attr('cy', d.y = e.y); 
    } 
} 

Beachten Sie, dass der Code-Schnipsel hier ist eine Alternative zu den Implementierungsdetails in "drag-Zoom-2".

Answer 4

Da D3 nicht in Typoskript implementiert ist. Das folgt strict typings.wir müssen d3.drag() schreiben an (< any> d3) .drag()

Hoffe es funktioniert.