D3.js d3.以角度2拖动（）

仍然无法找到如何在Angular2组件中使用d3.drag（）

尝试：

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

但是得到“未解析的函数或方法drag（）”

我已经安装了d3，它工作得很好。我已经使用import*作为d3从“d3”导入了d3。下面是我的代码示例：

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));
    };

因此，我可以在Angular2中使用D3根据一些数据绘制一些项目，但我无法进行拖动或缩放等操作，即使它在一些js示例中工作，如此处或，但在Angular2中不起作用。

为了使用D3.drag（），您必须安装

D3 drag

软件包：

npm install d3-drag

---

因此，我还没有发现如何在Angular2中使用D3的函数drag（）与D3的版本4配合使用，但它与D3的版本3配合得很好。

有关如何在组件中使用

D3 drag

的示例，请看以下内容。虽然示例使用了

d3-ng2-service

，但它应该给您一个基本概念：

• 使用服务访问

  d3

  ，这可能是您自己的定制
• 创建事件处理所需的回调
• 将事件处理程序附加到相应的生命周期挂钩中

作为一个重要的考虑因素，请注意，通过设计，

d3拖动的
this
范围是选定的元素，而不是角度组件的
this
范围！因此，如果您需要在回调中访问角度组件的成员，请使用从提供对角度组件访问权限的闭包返回的拖动事件处理程序

这可能意味着添加一个专用角度分量方法，如：

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);
  }
}

private getDragHandler（）{
const self=这个；
返回函数（this:svgcircleement，d:PhyllotaxisPoint）{
设e:D3DragEvent=d3.event；
//使用self.foo访问角度组件的foo成员。
d3.选择（this）.attr（'cx'，d.x=e.x）.attr（'cy'，d.y=e.y）；
}
}

请注意，这里的代码片段是“drag-zoom-2”中实现细节的替代品。
因为D3不是在typescript中实现的。我们需要将d3.drag（）类型转换为（d3.drag（））

希望它能起作用。
在哪里以及如何导入d3？此错误发生在何处？从“d3”导入*作为d3；考虑到d3，你的systemjs配置是什么样子的？我使用d3的4.0.0版本，其他东西都很好，当我从其他Angular2组件获得一些数据时，我可以创建一些带有一些属性的svg项。我也可以为一些事件使用一些函数，比如mouseover，但我仍然不知道如何使用拖动或缩放行为，这在一些js示例中有效，但在Angular2中无效。我正在使用webpack。我已经安装了，但这不是问题所在。