Javascript 无法在d3中拖动

我有下面的D3代码，但是我无法成功地拖动rect元素。（请忽略错误的缩进）我无法理解我在这里做错了什么

var svg = d3.select('#slider').append('svg')
    .attr('width', width)
    .attr('height', height);


var drag = d3.behavior.drag()
    .origin(function (d) {
        return d;
    })
    .on("dragstart", dragstarted)
    .on("drag", dragged);

//Called when drag event starts. It stop the propagation of the click event
function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
}

//Called when the drag event occurs (object should be moved)
function dragged(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    //Translate the object on the actual moved point
    d3.select(this).attr({
        transform: "translate(" + d.x + "," + d.y + ")"
    });
};

svg.append('rect')
    .attr('width', 500)
    .attr('height', 250)
    .attr('x', 10)
    .attr('y', 50)
    .attr('fill', "transparent")
    .attr('stroke', "orange")
    .attr('stroke-width', 2)
    .append("title")
    .text(function (d) {
        return "Zone 1";
    })
    .call(drag);

有一些问题：

您没有将任何数据绑定到

。尝试通过参数

d

引用该数据时，对

.origin（）

和

.on（）

的回调将失败。您可以使用

s配置设置一个对象，该配置可以在整个代码中使用

// Configuration for rect
var rect = {
  x: 50,
  y: 50,
  w: 500,
  h: 250,
  t: "Zone 1"
};

svg.selectAll("rect")
    .data([rect])   // bind your config to the rect to be appended
  .enter().append('rect')
    .attr('width', function(d) { return d.w; })
    .attr('height', function(d) { return d.h; })

通过这种方式，它被绑定到您的

，因此即使在拖动处理程序中也可以访问它。这是D3.js中非常常见的模式

在将

元素添加到

之后，您将调用

.drag（）

，这会将拖动行为添加到标题而不是

。要将拖动添加到

中，必须将其沿调用链向上移动

svg.selectAll("rect").data([rect]).enter().append('rect')
     // ...
     .call(drag)
   .append("title")
     .text(function(d){return d.t;});

要定位

，您需要结合使用a）其属性

x

和

y

以及b）在处理拖动偏移时设置

平移时的变换。把这两种方法混用通常会把事情搞砸。你应该选择这些方法中的任何一种，然后始终如一地坚持下去

我已经建立了一个工作片段，其中有更多的注释来解释这些更改。

var宽度=10000，
高度=10000；
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'高度'），高度；
var drag=d3.behavior.drag（）
.origin（函数（d）{return d；}）//这将访问绑定配置并访问其x和y
.on（“dragstart”，dragstart）
.打开（“拖动”，拖动）；
//当拖动事件开始时调用。它会停止单击事件的传播
函数dragstarted（d）{
d3.event.sourceEvent.stopPropagation（）；
}
//发生拖动事件时调用（应移动对象）
函数（d）{
d、 x=d3.event.x；//更新配置对象的x
d、 y=d3.event.y；//更新配置对象的y
//拖动时设置新的x和y
d3.选择（此）.attr({
“x”：d.x，
“y”：d.y
});
};
//rect的配置
var rect={
x:50，
y:50，
w:500，
h:250，
t:“1区”
};
svg.selectAll（“rect”）
.数据（[rect]）
.enter（）.append（'rect'）
.attr（'width'，函数（d）{return d.w；}）
.attr（'height'，函数（d）{return d.h；}）
.attr（'x'，函数（d）{return d.x；}）
.attr（'y'，函数（d）{返回d.y；}）
.attr（“填充”、“透明”）
.attr（'笔划'，“橙色”）
.attr（'stroke-width'，2）
.call（拖动）//在附加标题之前调用此函数
.附加（“标题”）
.文本（功能（d）{
返回d.t；
});
“请忽略不良缩进”你真的认为这种粗心会有助于说服任何人利用业余时间解决你的问题吗？几乎每一个编辑器都会在点击一个按钮后完成这项工作，即使如此，它的编辑功能也会为您完成这项工作。这是一种非常糟糕的态度。不管怎样，我尽了努力，整理了一个格式良好、希望有用的答案。