Javascript 如何执行d3拖放操作

角度4的d3阻力有问题。每当我拖动矩形对象时，它第一次移动得很好。释放mousepress并再次尝试拖动矩形后，它将返回到上一个事件，并且无法在可拖动对象上进行鼠标控制。请解决我的问题

import { Component,Input, ElementRef, OnInit } from '@angular/core'; 
import * as d3 from 'd3';  
interface LineData{
  xVal: number,
  yVal:number
}

@Component({
  selector: 'app-line-chart',
  template:'<svg height="500" width="500" ></svg>',
  styleUrl: [] 
})

export class LineChartComponent implements OnInit {
  @Input() data : LineData[];
  private parentNativeElement : any;
  constructor(private element:ElementRef) { 
      this.parentNativeElement = element.nativeElement;
  }

  ngOnInit() {
    var width = 300;
    var height = 300;
    var margin = {top: 10, right: 10, bottom: 30, left: 10}

    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var xAxis = d3.axisBottom(x)
        .scale(x)
        .ticks(5);

    var yAxis = d3.axisLeft(y)
        .scale(y)
        .ticks(5);

    var valueline:any = d3.line()
        .x(function (d) {
            return x(d['xVal']);
        })
        .y(function (d) {
            return y(d['yVal']);
        });
        console.log(valueline);

    var svg = d3.select("svg");
    d3.select(this.parentNativeElement)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");

    // Get the data
    var data = [
                  {
                    "xVal": 1,
                    "yVal": 2
                  },
                  {
                    "xVal": 2,
                    "yVal": 4
                  },
                  {
                    "xVal": 3,
                    "yVal": 1
                  },
                  {
                    "xVal": 4,
                    "yVal": 5
                  },
                  {
                    "xVal": 5,
                    "yVal": 3
                  }
              ];

    // Scale the range of the data
    x.domain(d3.extent(data,
        function (d) {
            return d.xVal;
        }));
    y.domain([
        0, d3.max(data,
            function (d) {
                return d.yVal;
            })
    ]);
     let color = d3.scaleOrdinal(d3.schemeCategory10);

     svg.append("path").datum(data).attr("class","path")// Add the valueline path.
    .attr("fill", "none")
    .attr("stroke", "red")
    .attr("stroke-width", 1.5)
    .attr("d", valueline(data)).attr("class", "line");


    let rectangle:any = d3.range(1).map(function(){
        return{
            x: Math.floor(Math.random()*width),
            y: Math.floor(Math.random()*height)
        };
    });

    console.log(rectangle);

   let dragRect = svg.selectAll('g').data(rectangle).enter().append("g")

    dragRect.append("rect")
    .attr("x",function(d){return d['x'];})
    .attr("y",function(d){return d['y'];})
    .attr("height",50)
    .attr("width",50).style("fill", "steelblue");

   svg.selectAll('g').attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")").data(rectangle)
    .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){
        d.xVal = x.invert(d3.event.x);
        d.yVal = y.invert(d3.event.y);
        d3.select(this).select("rect")
        .attr("x", x(d.xVal))
        .attr("y", y(d.yVal))
        .attr("transform","translate("+d.xVal+","+d.yVal+")")
        console.log(d); 
    }


    function dragended(d){
        d3.select(this).raise().classed("active",false);
        //d3.select('rect#no-drag').on('mousedown.drag',null);
    }



    svg.append("g") // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g") // Add the Y Axis
        .attr("class", "y axis"`enter code here`)
        .call(yAxis);
  }

}

从'@angular/core'导入{Component，Input，ElementRef，OnInit}；
从“d3”导入*作为d3；
接口线数据{
xVal：数字，
伊瓦尔：号码
}
@组成部分({
选择器：“应用程序折线图”，
模板：“”，
样式URL:[]
})
导出类LineChartComponent实现OnInit{
@Input（）数据：LineData[]；
private parentNativeElement：任何；
构造函数（私有元素：ElementRef）{
this.parentNativeElement=element.nativeElement；
}
恩戈尼尼特（）{
var宽度=300；
var高度=300；
var margin={顶部：10，右侧：10，底部：30，左侧：10}
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var xAxis=d3.axisBottom（x）
.比例（x）
.蜱（5）；
var yAxis=d3.轴左（y）
.比例（y）
.蜱（5）；
var valueline:any=d3.line（）
.x（功能（d）{
返回x（d['xVal']）；
})
.y（功能（d）{
返回y（d['yVal']）；
});
console.log（valueline）；
var svg=d3.选择（“svg”）；
d3.选择（此.parentNativeElement）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
//获取数据
风险值数据=[
{
“xVal”：1，
“伊瓦尔”：2
},
{
“xVal”：2，
“伊瓦尔”：4
},
{
“xVal”：3，
“伊瓦尔”：1
},
{
“xVal”：4，
“伊瓦尔”：5
},
{
“xVal”：5，
“伊瓦尔”：3
}
];
//缩放数据的范围
x、 域（d3.范围（数据、，
职能（d）{
返回d.xVal；
}));
y、 领域([
0，d3.最大值（数据，
职能（d）{
返回d.yVal；
})
]);
设color=d3.scaleOrdinal（d3.schemeCategory 10）；
svg.append（“path”）.datum（data）.attr（“class”，“path”）//添加valueline路径。
.attr（“填充”、“无”）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，1.5）
.attr（“d”，valueline（数据））.attr（“class”，“line”）；
让矩形：any=d3.range（1.map）（函数（）{
返回{
x:Math.floor（Math.random（）*宽度），
y:Math.floor（Math.random（）*高度）
};
});
log（矩形）；
让dragRect=svg.selectAll（'g'）.data（矩形）.enter（）.append（“g”）
dragRect.append（“rect”）
.attr（“x”，函数（d）{返回d['x']；}）
.attr（“y”，函数（d）{返回d['y']；}）
.attr（“高度”，50）
.attr（“宽度”，50）。样式（“填充”、“钢蓝”）；
svg.selectAll（'g'）.attr（“转换”，
“平移（“+margin.left+”，“+margin.top+”）。数据（矩形）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d、 xVal=x.invert（d3.event.x）；
d、 yVal=y.invert（d3.event.y）；
d3.选择（这个）。选择（“rect”）
.attr（“x”，x（d.xVal））
.attr（“y”，y（d.yVal））
.attr（“变换”、“平移”（“+d.xVal+”，“+d.yVal+”））
控制台日志（d）；
}
函数d（d）{
d3.选择（this）.raise（）.classed（“活动”，false）；
//d3.选择（'rect#no drag'）。打开（'mousedown.drag'，null）；
}
svg.append（“g”）//添加X轴
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）//添加Y轴
.attr（“类”、“y轴”`在此处输入代码`）
.呼叫（yAxis）；
}
}

基本问题似乎是

拖动

函数没有记住连续拖动事件之间的x&y

要做到这一点，你需要

d3.选择（此）
.attr（“x”，d.x=x（d.xVal））
.attr（“y”，d.y=y（d.yVal））

而不是

d3.选择（此）
.attr（“x”，x（d.xVal））
.attr（“y”，y（d.yVal））

---

运行此代码段以将其签出

console.clear（）
var宽度=300；
var高度=300；
var margin={顶部：10，右侧：10，底部：30，左侧：10}
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var xAxis=d3.axisBottom（x）、scale（x）、ticks（5）；
var yAxis=d3.轴左（y）.刻度（y）.刻度（5）；
var valueline=d3.line（）
.x（函数（d）{返回x（d['xVal']）；}）
.y（函数（d）{返回y（d['yVal']；}）；
var svg=d3.选择（“svg”）；
d3.选择（此.parentNativeElement）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
//获取数据
风险值数据=[
{
“xVal”：1，
“伊瓦尔”：2
},
{
“xVal”：2，
“伊瓦尔”：4
},
{
“xVal”：3，
“伊瓦尔”：1
},
{
“xVal”：4，
“伊瓦尔”：5
},
{
“xVal”：5，
“伊瓦尔”：3
}
];
//缩放数据的范围
x、 域（d3.范围（数据、，
职能（d）{
返回d.xVal；
}));
y、 领域([
0，d3.最大值（数据，
职能（d）{
返回d.yVal；
})
]);
设color=d3.scaleOrdinal（d3.schemeCategory 10）；
svg.append（“path”）.datum（data）.attr（“class”，“path”）
.attr（“填充”、“无”）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，1.5）
.attr（“d”，valueline（数据））.attr（“class”，“line”）；
设矩形=d3.range（3.map）（函数（）{
返回{
x:Math.floor（Math.random（）*宽度），
y:Math.floor（Math.random（）*高度）
};
});
让dragRect=svg.selectAll（'g'）。数据（矩形）。输入（）
.附加（“g”）
dragRect.append（“rect”）
.attr（“x”，f