如何用一个值函数设置多个属性？

给定包含多个数据元素（如对象或数组）的数据，是否可以使用单个值函数在select上设置多个属性？

例如：

var data = [{ 'x': 10, 'y': 20, 'r': 5 }]; d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .attr('cx cy r', function (d) { return [dx, dy, dr]; }); 

代替：

 var data = [{ 'x': 10, 'y': 20, 'r': 5 }]; d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .attr('cx', function (d) { return dx; }); .attr('cy', function (d) { return dy; }); .attr('r', function (d) { return dr; }); 

Answer 1

更新 （2016年7月8日）这个回答适用于d3 v3.x – NOT v4.x. 对于后面的版本，请参阅Tim Hayes的答案 ，也在这个页面上。 或者…在我的答案中只是将attr与attrs交换，并且不要忘记要求/ import / script-embed d3-selection-multi 。 而且…不要错过使用.each的一些.each ，这可能对你有用。

---

是的，这可能通过传递哈希（如jQuery的css()方法）：

 d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .attr({ cx: function (d) { return dx; }, cy: function (d) { return dy; }, r: function (d) { return dr; } }); 

这也适用于style() 。

如果重复出现的function (d) {}开始感觉太多，这是另一种方法：

 d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .each(function (d) { d3.select(this).attr({ cx: dx, cy: dy, r: dr }); }) 

注：此function只存在于d3.js v2.10.0或更高版本中

Answer 2

这是一个旧的post，但我find了，同时谷歌search答案。 接受的答案不再适用于D3 v4.0。

向前走，你可以通过使用attrs()方法来做同样的事情。 但是只有加载可选的d3-selection-multi脚本才支持attrs() 。

所以使用上面的例子，它将在D3 v4.0中看起来像这样：

 // load d3-selection-multi as separate script <script src="d3-selection-multi.v0.4.min.js"></script> d3.select('body').append('svg').selectAll('circle') .data(data) .enter().append('circle') .attrs({ cx: function (d) { return dx; }, cy: function (d) { return dy; }, r: function (d) { return dr; } });