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

Question

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

例如像这样的东西：

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

而不是：

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

Answer 1

更新（2016 年 7 月 8 日）此答案适用于 d3 v3.x — 不适用于 v4.x。对于后一个版本，请参阅Tim Hayes 的回答，也在本页上。或者...只需在下面的答案中将

attr

与

attrs

交换，并且不要忘记 require/import/script-embed

d3-selection-multi

。并且...不要错过有关使用

.each

的部分，这可能对您有用。

---

是的，可以通过传入哈希值（如 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; }
  });

这也适用于

style()

。

如果重复出现的

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

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

Answer 2

这是一篇旧帖子，但我在谷歌搜索答案时发现了它。接受的答案在 D3 v4.0 中不再有效。

继续前进，您可以使用

attrs()

方法执行相同的操作。但仅当您加载可选的

d3-selection-multi

脚本时才支持 attrs()。

所以使用上面的例子，在 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; }
  });

Answer 3

由于 d3-selection-multi 现已存档并且不适用于最新版本的 d3，因此以下内容将为您提供相同的功能：

d3.selection.prototype.styles = function(map) {
  for (const name in map) this.style(name, map[name])
  return this
}

改编自https://github.com/d3/d3-selection-multi/blob/master/src/selection/styles.js