如何使用一個值函數設置多個屬性？

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 - NOT v4.x. 對於后一版本，請參閱Tim Hayes的回答 ，也在此頁面上。 或者......在下面的答案中，只需將attr與attrs交換，並且不要忘記要求/ 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; }
  });