Question

这里我在另一个矩形中创建一个名为resize_icon的矩形，将其定位在大矩形的右下角。我希望这个resize_icon矩形在大矩形内自由拖动，但它不应该越过更大的矩形顶边和它的左边但可以拖到其他地方。 resize []是一个包含resize_icon矩形的id，x和y位置的数组。请看下面的拖拽代码，请告诉我为什么它不起作用。此外，如果任何人都可以建议一个正确的代码将是非常有用的。

            c.append('rect').attr('class','resize_icon').attr('fill','#000')
                .attr('id','resize_icon'+i).attr('height',5).attr('width',5)
                .attr('x', x+wd+35).attr('y',y+rectHeight-5).on(drag1)
                .on('click',function(){

                        d3.selectAll(".selected").classed("selected",false);

                        d3.select(this.parentNode).classed("selected",true);

                        resize_rect(i); 


                  });


      var drag1 = d3.behavior.drag().origin(function()
    { 
      var t = d3.select(this);
      return {x: t.attr("x"), y: t.attr("y")};
    })
     .on("dragstart", dragstart)
     .on("drag", dragon)
     .on("dragend", dragstop);


  function dragstart() {
      d3.event.sourceEvent.stopPropagation();
      d3.select(this).classed("drag", true);
    }

  function dragon() {     
      d3.select(this).select('.resize_icon')
                     .attr("x",  d3.event.x)
                     .attr("y", d3.event.y);

      id = d3.select(this).select('.resize_icon').attr("id");
      a = id.replace("resize_icon", "");
      resize[a].x = d3.event.x;
      resize[a].y = d3.event.y;

    }          


  function dragstop() {
   d3.select(this).classed("drag", false);
  }

Answer 1

这是我在边界之间拖动的代码：

function button_drag2(xLower,xHigher,yLower,yHigher){
    return d3.behavior.drag()
             .origin(function() {
                var g = this;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d) {

                g = this;
                translate = d3.transform(g.getAttribute("transform")).translate;

                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];

                if(x<xLower){x=xLower;}
                if(x>xHigher){x=xHigher;}
                if(y<yLower){y=yLower;}
                if(y>yHigher){y=yHigher;}

                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();             
            });
}
}

然后致电您的选择：

    var selection = "#rectangle"; //change this to whatever you want to select
    d3.select(selection).call(button_drag2(-100,100,-100,100)); 

// this lets you drag the rectangle 100px left, right, up and down. Change to what ever you want :)

希望这可以帮助你：）

如何在d3.js中拖动一个svg矩形？

1 个答案: