Как установить несколько атрибутов с помощью одной функции значения?

Для данных, содержащих несколько элементов данных, таких как объект или массив, можно ли установить несколько атрибутов для выбора с помощью одной функции значений?

например. что-то вроде:

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

Ответ 1

ОБНОВЛЕНИЕ (8 июля 2016 года) Этот ответ относится к d3 v3.x - NOT v4.x. Для последней версии см. Тим Хейс ответ, также на этой странице. Или... просто замените 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 или выше

Ответ 2

Это старый пост, но я нашел его, пока Google Googling нашел ответ. Принятый ответ больше не работает в D3 версии 4.0.

Двигаясь вперед, вы можете сделать то же самое, используя метод attrs(). Но attrs() поддерживается только при загрузке необязательного d3-selection-multi script.

Итак, используя пример выше, он будет выглядеть так, как в 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; }
  });