Question

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

我使用以下方法做到了：

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

在JS中只需+=即可。有没有比获取当前值并再次添加和设置更好的方法呢？

以下内容是根据 Robert Longson 的建议创建的，而我正在使用d3_v4。这里的问题是它们被连接起来（作为字符串）而不是数字加法，我试图用Number()来解决这个问题，但它提出错误说Must be lvalue。

function mov() {
  var diffX = 5;
  d3.select("#ee")["_groups"][0][0]["attributes"].x.value += diffX;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<button onclick="mov()">Click to move</button>
<br>
<svg width="400" height="400">
  <rect id="ee" x="10" y="10" width="100" height="100" />
</svg>

Answer 1

使用SVG DOM。

function mov() {
  var diffX = 5;
  d3.select("#ee").node().x.baseVal.value += diffX;

  // or alternatively
  // document.getElementById("ee").x.baseVal.value += diffX;
  // as suggested by altocumulus
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<button onclick="mov()">Click to move</button>
<br>
<svg width="400" height="400">
  <rect id="ee" x="10" y="10" width="100" height="100" />
</svg>

Answer 2

D3 setter and getters

我相信对D3中的setter和getter如何工作的理解可以在这里阐明一些。

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

在JS中只需+ =工作

那么，为什么我们不能使用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中的标准模式。

增加d3属性的最佳方法

2 个答案: