Javascript 增加d3.js中的属性值

我想根据一些差值改变元素坐标。假设我有一堆线要在拖动时更新。拖动事件时，我调用此函数：

var updatePosition = function(dx, dy) {         

    thiz.self.select('line').attr('x2', * wanna increase x2 by dx * ).attr('y2', * wanna increase y2 by dy * );
};

有没有一种优雅的方法可以做到这一点？或者任何可行的方法：）

谢谢

更新：

---

我需要改变的位置很少，所以我不能仅仅抓住电流（x2，y2）并给它添加一个新值。至少我不知道该怎么做。

只需这样翻译位置：

d3.select(selection).attr('transform', 'translate(' + valueX + ',' + valueY + ')');

因此，在你的情况下：

var updatePosition = function(dx, dy) {         
    d3.select(selection).attr('translate', 'translate(' + dx+ ',' + dy+ ')');
};

编辑

由于您只想移动

x2

和

y2

，请执行以下操作：

var updatePosition = function(dx, dy) {         
   d3.select(selection).attr('transform', function(d)//selection being your element you wish to edit
   {
     return 'translate(' + (d.x2 + dx) + ',' + (d.y2 + dy) + ')');
   }
};

---

只需这样翻译位置：

d3.select(selection).attr('transform', 'translate(' + valueX + ',' + valueY + ')');

因此，在你的情况下：

var updatePosition = function(dx, dy) {         
    d3.select(selection).attr('translate', 'translate(' + dx+ ',' + dy+ ')');
};

编辑

由于您只想移动

x2

和

y2

，请执行以下操作：

var updatePosition = function(dx, dy) {         
   d3.select(selection).attr('transform', function(d)//selection being your element you wish to edit
   {
     return 'translate(' + (d.x2 + dx) + ',' + (d.y2 + dy) + ')');
   }
};

---

如果您知道您的选择中只有一个元素，则可以使用

attr

作为getter：

var line = thiz.self.select('line');
var x = line.attr('x2');
var y = line.attr('y2');
line.attr('x2', x + dx).attr('y2', y + dy);

尽管如此，我想知道您的拖动模式最终如何需要

thiz.self.select（'line'）。我希望拖动事件会更改数据，然后通知正常的d3更新模式如何更改线元素。有点像这样：

var drag = d3.behavior.drag()
  .on("dragstart", function(d, i) {
    d.origin = [d.x, d.y];
  })
  .on("drag", function(d, i) {
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    draw(d3.select(this));
  })

function draw(selection) {
  selection
    .attr("x2", function(d) {
      return d.x;
    })
    .attr("y2", function(d) {
      return d.y;
    });
}

如果您知道您的选择中只有一个元素，则可以使用
attr
作为getter：

var line = thiz.self.select('line');
var x = line.attr('x2');
var y = line.attr('y2');
line.attr('x2', x + dx).attr('y2', y + dy);

尽管如此，我想知道您的拖动模式最终如何需要
thiz.self.select（'line'）。我希望拖动事件会更改数据，然后通知正常的d3更新模式如何更改线元素。有点像这样：

var drag = d3.behavior.drag()
  .on("dragstart", function(d, i) {
    d.origin = [d.x, d.y];
  })
  .on("drag", function(d, i) {
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    draw(d3.select(this));
  })

function draw(selection) {
  selection
    .attr("x2", function(d) {
      return d.x;
    })
    .attr("y2", function(d) {
      return d.y;
    });
}

好的，我想出来了，你们是对的（+1感谢你们的帮助），诀窍是获取这个当前值，可以在这样的匿名函数中检索：

var updatePosition = function(dx, dy) {           
    thiz.self.select('line').attr('x2', function(d, i) {
        return d3.select(this).attr('x2') - dx;
    }).attr('y2', function(d, i) {
        return d3.select(this).attr('y2') - yx;
    });
};

所以
这个
在这种情况下将指向行本身。
好的，我想出来了，你们是对的（+1）谢谢你们的帮助，诀窍是获取这个当前值，可以在这样的匿名函数中检索：

var updatePosition = function(dx, dy) {           
    thiz.self.select('line').attr('x2', function(d, i) {
        return d3.select(this).attr('x2') - dx;
    }).attr('y2', function(d, i) {
        return d3.select(this).attr('y2') - yx;
    });
};

所以在这种情况下，
这个
将指向直线本身。
问题是我想一次移动的直线很少。问题是我想一次移动的直线很少。我不需要移动整条直线，我只需要移动x2，y2坐标。@Anton我知道你已经找到了答案，但我显然误解了这个问题。我已经更新了我的答案我不需要移动整条线，我只需要移动x2，y2坐标。@Anton我知道你已经找到了答案，但我显然误解了这个问题。我已经更新了我的答案