Question

仍然无法找到如何在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示例中工作，如http://bl.ocks.org/enjalot/1378144或https://bl.ocks.org/mbostock/6123708，但不在Angular2中。

Answer 1

要使用d3.drag（），您必须安装$('tr.trusure2.trrstatusR:last').index()包：

d3-drag

Answer 2

有关如何在组件中使用d3-drag的示例，请查看以下drag-zoom-2 Angular component example。虽然该示例使用d3-ng2-service，但它应该为您提供一个基本想法：

使用服务访问d3，这可能是您自己的自定义
创建d3-drag事件处理所需的回调，
将事件处理程序附加到相应的Angular生命周期钩子中。

作为一个重要的考虑因素，请注意，根据设计，this回调的d3-drag范围是选定元素，而不是this范围你的Angular组件！因此，如果您需要访问回调中Angular组件的成员，请使用从闭包返回的拖动事件处理程序，以便您可以访问Angular组件。

这可能意味着添加一个私有的Angular组件方法，如：

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

请注意，此处的代码段可以替代＆＃34; drag-zoom-2＆＃34;中的实现细节。

Answer 3

因为D3没有在打字稿中实现。这遵循严格的typings.we需要将d3.drag（）类型转换为（＆lt; any＆gt; d3）.drag（）

希望它有效。

Answer 4

所以我还没有找到如何使用D3中版本4的Angular2中D3的函数drag（），但它适用于D3的第3版。

Angular2中的d3.drag（）

4 个答案: