给定包含多个数据元素(如对象或数组)的数据,是否可以使用单个值函数在选择上设置多个属性?
例如:
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; });
meetamit.. 66
更新(2016年7月8日)此答案适用于d3 v3.x - NOT v4.x. 对于后一版本,请参阅Tim Hayes的回答,也在此页面上.或者只换attr
用attrs
在我的回答如下,不要忘了要求/进口/脚本嵌入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或更高版本中
这是一个老帖子,但我在谷歌搜索时找到答案.接受的答案在D3 v4.0中不再有效.
继续前进,您可以使用该attrs()
方法执行相同的操作.但attrs()
只有在加载可选的d3-selection-multi脚本时才支持.
所以使用上面的例子,它在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; } });
更新(2016年7月8日)此答案适用于d3 v3.x - NOT v4.x. 对于后一版本,请参阅Tim Hayes的回答,也在此页面上.或者只换attr
用attrs
在我的回答如下,不要忘了要求/进口/脚本嵌入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或更高版本中