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

Given a datum containing multiple data elements, such as an object or array, is it possible to set multiple attributes on a selection with a single value function?

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

E.g. something like:

例如。就像是：

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 [d.x, d.y, d.r];
    });

instead of:

代替：

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 d.x;
    });
    .attr('cy', function (d) {
        return d.y;
    });
    .attr('r', function (d) {
        return d.r;
    });

2 个解决方案

#1

UPDATE (July 8th 2016) This answer applies to d3 v3.x — NOT v4.x. For the latter version, see Tim Hayes's answer, also on this page. Or... just swap attr with attrs in my answer below, and don't forget to require/import/script-embed d3-selection-multi. And... don't miss the bit about using .each, which may be useful to you.

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

Yeah, it's possible by passing in a hash (like jQuery's css() method):

是的，可以通过传递哈希（比如jQuery的css（）方法）：

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

This works for style() as well.

这适用于style（）。

If the reoccurring function (d) {} start to feel like too much, this is another approach:

如果重复发生的函数（d）{}开始感觉太多，这是另一种方法：

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

NOTE: this feature only exists in d3.js v2.10.0 or higher

注意：此功能仅存在于d3.js v2.10.0或更高版本中

#2

This is an old post, but I found it while Googling around for an answer. The accepted answer no longer works in D3 v4.0.

这是一个老帖子，但我在谷歌搜索时找到答案。接受的答案在D3 v4.0中不再有效。

Moving forward, you can do the same by using the attrs() method. But attrs() is only supported if you load the optional d3-selection-multi script.

继续前进，您可以使用attrs（）方法执行相同操作。但只有在加载可选的d3-selection-multi脚本时才支持attrs（）。

So using the example above, it would look like this in D3 v4.0:

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

// load d3-selection-multi as separate script
<script src="https://d3js.org/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 d.x; },
    cy: function (d) { return d.y; },
    r:  function (d) { return d.r; }
  });

#1