无法拖入d3

Question

我有以下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);

Answer 1

有一些问题：

1. 您没有将任何数据绑定到<rect> 。 当尝试通过参数d引用该数据时， .origin()和.on()回调将失败。 您可以使用<rect>的配置设置一个对象，该对象可以在您的整个代码中使用。

    // 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 dw; }) .attr('height', function(d) { return dh; }) 

   这样，它绑定到了<rect> ，因此即使在拖动处理程序中也可以访问它。 这是D3.js中非常常见的模式。

2. 将<title>元素附加到<rect> ，您将调用.drag() ，这会将拖动行为添加到标题而不是<rect> 。 要将拖动添加到<rect>您必须将其向上移动到调用链中。

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

3. 要定位你的<rect>您正在使用）及其属性的组合x和y当设置和b）转换translate在处理拖动的偏移。 混合这两种方法通常会搞砸。 您应该选择其中一种方法，然后始终坚持下去。

我已经建立了一个工作片段，并提供了更多注释来解释更改。

 var width = 10000, height = 10000; var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); var drag = d3.behavior.drag() .origin(function(d) { return d; }) // this will access the bound config accessing its x and y .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) { dx = d3.event.x; // update x of the config object dy = d3.event.y; // update y of the config object // Set new x and y on drag d3.select(this).attr({ "x": dx, "y": dy }); }; // Configuration for rect var rect = { x: 50, y: 50, w: 500, h: 250, t: "Zone 1" }; svg.selectAll("rect") .data([rect]) .enter().append('rect') .attr('width', function(d) { return dw; }) .attr('height', function(d) { return dh; }) .attr('x', function(d) { return dx; }) .attr('y', function(d) { return dy; }) .attr('fill', "transparent") .attr('stroke', "orange") .attr('stroke-width', 2) .call(drag) // call this before the title is appended .append("title") .text(function(d) { return dt; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>