5

d3jsを使い始めたばかりですが、背景データ構造にリンクする要素ごとに複数のセレクターを作成する必要があるのは不思議です。たとえば、オーバーレイテキスト用と長方形用のセレクターを個別に作成して注釈付きバーを作成します。グラフ。

svg.selectAll("rect")
.data(data)
.enter()
    .append("rect")
    .attr('y',function(d,i){return i*10;})
    .attr('height',10)
    .attr('width',function(d){return d.interestingValue})
    .fill('#00ff00');

svg.selectAll("text")
.data(data)
.enter()
    .append("text")
    .attr('y',function(d,i){return i*10;})
    .fill('#0000ff')
    .text(function(d){return d.interestingValue});

これらを単一のselectionとenter（）チェーンに組み合わせて、rects要素とtext要素の両方を作成するより便利な方法はありますか？

4

1 に答える 1

20

G（グループ）要素を使用します。単一のデータ結合を使用してG要素を作成してから、rect要素とtext要素を追加します。例えば：

var g = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d) { return "translate(0," + i * 10 + ")"; });

g.append("rect")
    .attr("height", 10)
    .attr("width", function(d) { return d.interestingValue; });

g.append("text")
    .text(function(d) { return d.interestingValue; });
于 2012-07-06T16:04:39.200 に答える