javascript - 如何将拖动应用于矩形/图像？

Question

这样一个愚蠢的问题，可能有一个简单的答案，但我无法在我的 Canvas 上拖动我的图像。这是我的图片代码:

    function simpleButton(origImage, overlay, iconWidth, iconHeight, xpos, ypos, whenClicked, title)
{
    svg.append("svg:image")
    .datum({
      x: xpos, //-starting 'x' position
      y: ypos  //-starting 'y' position
    })
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; })

        .attr("xlink:href", origImage) //-original image
        // .attr("x",xpos) //-starting 'x' position
        // .attr("y",ypos) //-starting 'y' position
        .attr("width",iconWidth) //-icon width
        .attr("height",iconHeight) //-icon height
        .on("click",whenClicked) //-call when button is clicked
        .on("mouseover",function(){d3.select(this).attr("xlink:href", overlay);}) //-change image when mouseover
        .on("mouseout",function(){d3.select(this).attr("xlink:href", origImage);}) //-reset image
        .call(button_drag)
        .append("svg:title")
            .text(title); //-give the button a title        
}

还有我的拖动功能:

var button_drag = d3.behavior.drag()

    .on("dragstart", function(){
        clog("dragstart");
    })
    .on("drag", function(d,i) {
             d.x += d3.event.dx
             d.y += d3.event.dy
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d.x,d.y ] + ")"
            })
        })
    .on("dragend", function(){
        clog("dragend");
    });

尝试拖动其中一张图片时出现错误:

 Uncaught TypeError: Cannot read property 'x' of undefined

我已尝试对其进行研究，但显然我没有将数据应用于我的矩形。我该如何解决这个问题？

Answer 1

拖动应该通过d — 绑定(bind)到被拖动元素的数据 — 到您的处理函数中 .on("drag", function(d,i) { ... } .

在你的情况下 d未定义，这就是设置 d.x 的原因提示它无法读取属性 'x'未定义的。原因d未定义是因为没有数据绑定(bind)到图像。数据绑定(bind)到元素的方式是:

1. 使用 d3 选择的 .data()绑定(bind)然后附加 enter() 的方法'ing 到元素 — 而不仅仅是 svg.append荷兰国际集团他们像你一样。或者，
2. 如果您不想执行#1，那么您需要使用.datum() 显式地将数据绑定(bind)到您创建的元素。方法。

做这两个中的一个会引发什么问题 d应该是。嗯...它应该是一个具有属性的对象 x和 y ，因为拖动处理程序想要修改这些 Prop 。

x和 y可能应该初始化为 xpos和 ypos ，即初始位置。一次x和 y是数据的一部分，您应该切换到基于它们设置图像的 x 和 y 位置，而不是硬编码为 xpos, ypos .

将所有内容放在一起，如果您选择了选项 #2，则它看起来像这样:

svg.append("svg:image") 
    .datum({
      x: xpos, //-starting 'x' position
      y: ypos  //-starting 'y' position
    })
    .attr("xlink:href", origImage) //-original image
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; })
    .attr("width",iconWidth) //-icon width
    .attr("height",iconHeight) //-icon height       
    .call(button_drag)