0

異なる色で3つの連続した正方形を描画し（問題ありません。「scale」変数にあります）、各大きな色の下に可変数の小さな正方形を配置します（つまり、「dots」変数）。 。私は何が間違っているのですか？これは私のコードであり、要点https://gist.github.com/3013836：

var data = [-1,0,1]

var rect_size = 25; //px

var x = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, rect_size*data.length]);
var color = d3.scale.linear().domain([-1.5, 0, 1.5]).range(["#278DD6","#ffffff","#d62728"]).clamp(false);

var svg = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 200)

scale = svg.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("x", function(d,i) { return x(i); })
    .attr("y",0)
    .attr("width", rect_size)
    .attr("height", rect_size)
    .style("fill", function(d) { return color(d); });

dots = [[1,2,3],[1,2],[1,2,3,4]]
var y = d3.scale.ordinal().domain(d3.range(dots.length)).rangeBands([0, (rect_size/2)*dots.length]);
scale.selectAll("g")
    .data(dots, function(d){return d;})
  .enter().append("rect")
    .attr("x", function(d,i) {return x(i);})
    .attr("y", function(d,i) {return y(i);})
    .attr("width", rect_size/2)
    .attr("height", rect_size/2)
    .style("fill", "black");
4

1 に答える 1

1

scale選択範囲を3つのrect要素として定義しました。次に、それらのそれぞれの中にさらに3つのrect要素を追加しました。ブラウザの要素インスペクタを使用すると、結果の構造は次のようになります。

<rect class="outer">
  <rect class="inner"></rect>
  <rect class="inner"></rect>
  <rect class="inner"></rect>
</rect>

rectはSVGのコンテナ要素ではないため、これは3つのrectのみを表示します。内側の長方形は無視されます。

要素をグループ化する場合は、 g（グループ）要素が必要です。次のような構造が必要です。

<g>
  <rect class="outer"></rect>
  <rect class="inner"></rect>
  <rect class="inner"></rect>
  <rect class="inner"></rect>
</g>

これを行うには、最初にdata-joinを使用してg要素の選択を作成します。次に、g要素に単一の外部四角形を追加します。最後に、ネストされた結合を使用して内部四角形を作成します。何かのようなもの：

var g = svg.selectAll("g")
    .data(outerData)
  .enter().append("g");

var outerRect = g.append("rect")
    .attr("class", "outer");

var innerRect = g.selectAll(".inner")
    .data(innerData)
  .enter().append("rect")
    .attr("class", "inner");

他のいくつかのこと：

  • g要素に変換を使用して、外側の四角形と内側の四角形を別々に配置する必要がないようにすることができます。このようにして、内側の四角形を外側の四角形に対して相対的に配置でき、コードが単純になります。

  • 「g」を選択して「rect」を追加しているため、最後の結合が壊れています。追加するものはすべて、セレクターと一致する必要があります。

  • 更新と終了も処理しない限り、通常、データ結合でキー関数は必要ありません。結合で入力のみを処理していて、選択範囲が空であることがわかっているため、キー関数は不要です。

于 2012-06-29T06:19:43.143 に答える