Question

我想根据一些差异值更改元素坐标。假设我有很多行来更新拖动。在拖动事件中，我调用此函数：

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）并为它添加一个新值。至少我不知道如何。

Answer 1

如果你知道你的选择中只有一个元素，你可以使用attr作为吸气剂：

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;
    });
}

Answer 2

好的，我想通了，你是对的（你的帮助+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;
    });
};

因此，在这种情况下this将指向行本身。

Answer 3

只需翻译这样的位置：

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.js中的属性值

3 个答案: