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

时间:2013-12-29 05:32:40

标签: javascript d3.js attributes

如果一个数据包含多个数据元素,例如一个对象或数组,是否可以使用单个值函数在选择上设置多个属性?

E.g。类似的东西:

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

2 个答案:

答案 0 :(得分:66)

更新(2016年7月8日)此答案适用于d3 v3.x - NOT v4.x.对于后一版本,请参阅此页面上的Tim Hayes's answer。或者......只需在下面的回答中将attrattrs交换,并且不要忘记要求/ 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或更高版本

答案 1 :(得分:61)

这是一篇很老的帖子,但我在Google搜索时找到了答案。接受的答案在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; }
  });