web-dev-qa-db-ja.com

1つの値関数で複数の属性を設定する方法は？

オブジェクトや配列などの複数のデータ要素を含むデータが与えられた場合、単一の値関数で選択範囲に複数の属性を設定することは可能ですか？

例えば。何かのようなもの：

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;
    });
javascriptd3.jsattributes
50
ericsoco

[〜＃〜] update [〜＃〜]（2016年7月8日）この回答はd3 v3.xに適用されます— 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以降にのみ存在します

66
meetamit

これは古い投稿ですが、グーグルで答えを探しているときに見つけました。 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; }
  });
64
TimHayes