Javascript 增加d3属性的最佳方法

我有一段代码，我想增加/减少d3对象的属性值

我使用了以下方法：

var diff=5;
d3Selector.attr("x",function(){
    return Number(d3Selector.attr("x"))+diff;
});

在JS中，只需使用

+=

即可。有没有比获取当前值并再次添加和设置它更好的方法

以下内容是根据Robert Longson的建议创建的，我正在使用d3_v4。这里的问题是它们是串联的（作为字符串），而不是数字相加，我试图用

number（）

解决这个问题，但它给出了一个错误，即

必须是左值


函数mov（）{
var-diffX=5；
d3.选择（“#ee”）[“组”][0][0][“属性”].x.value+=diffX；
}

点击移动


使用SVG DOM


函数mov（）{
var-diffX=5；
d3.选择（“#ee”）.node（）.x.baseVal.value+=diffX；
//或者
//document.getElementById（“ee”）.x.baseVal.value+=diffX；
//正如高积云所建议的那样
}

点击移动


D3设置器和获取器

我相信，了解二传手和传接手在D3中的工作方式可以在这里提供一些启示

您要求提供一种更好的方法来增加给定的属性，而不是“获取当前值并再次添加和设置”，您说：

在JS中，simply+=works

那么，为什么我们不能用D3做同样的事情呢？让我看看

鉴于这一非常基本的代码：

var svg = d3.select("body").append("svg");

var circle = svg.append("circle").attr("cx", 50)
    .attr("cy", 50).attr("r", 5);

它在（50,50）处绘制一个圆。我们可以使用getter获得该圆的
cx
值。getter基本上是相同的函数，但只有一个参数：

var x = circle.attr("cx");//returns 50

那么，如果我们使用JS
+=
向x添加一个值，会发生什么呢

var x += 100;//returns 50100

50+100不是50100。我们刚刚发现，
x
的值是一个字符串，而不是一个数字。要将其转换为数字，请执行以下操作：

var x = circle.attr("cx");
x = +x;
x += 100;

现在，
x
是150。我们成功地向
x
添加了一个值

这是最重要的部分：这不会改变圆的位置
x
只是一个变量，它使用getter获取该圆的
cx
值

更改
x
值就是更改变量的值。它不会影响元素

要更改圆的位置（无需操纵
baseVal
），我们必须使用setter，即具有2个参数的函数：

circle.attr("cx", x);//now the circle moves to (150,50)

结论：该模式（获取当前值、添加内容、重新设置值）可能看起来很麻烦，也不是很优雅，但这是D3中的标准模式。
d3Selector[0][0]。x.baseVal.value+=diff；为你工作。如果不创建一个可运行的fiddle或堆栈代码段，那么我可以告诉您该怎么做并测试我的答案。不，但这是可行的：
d3child[“_groups”][0][0][“attributes”].cx.value+=diff
@RobertLongson版本更改是否导致了差异？我尝试使用d3_v4，并通过添加代码片段更新了问题。这种方法依赖于访问d3的内部，这是非常不鼓励的。不使用D3进行操作将更快更容易阅读：
document.getElementById（“ee”）.x.baseVal.value+=diffX
@altocumulus我已经更新了答案，不使用内部构件，而是使用标准的d3节点方法。因为OP明确要求使用d3方法，这实际上可能是最准确的答案。是否可以在这上面添加一个转换？