1

（最初にGoogleグループに投稿しましたが、応答がないため、ここに投稿する必要があると想定しています）。

パイ (黄色と白のセグメント) の上にサンバースト (色付きの円弧) を配置しようとしています。

問題を示す js フィドルを次に示します。最初の緑色のセグメントがありません。

http://jsfiddle.net/qyCkB/1/ :

ここに画像の説明を入力

そして、すべてのセグメントが正しく表示されるパイなしの js フィドル:

http://jsfiddle.net/X3sRy/1/

ここに画像の説明を入力

この行で作成された後、ノード変数を確認しました。

  var nodes = partition.nodes({'values': data});

値は両方の例で同じように見えます。

DOM を確認すると、サンバーストの最初のいくつかのセグメントが描画されていません。

これは機能するはずですか、それとも 2 つの異なるレイアウトを重ねることはできないのでしょうか? 同じことを達成するためのより良いアプローチはありますか?

4

1 に答える 1

1

2 番目のデータ結合が最初の結合と競合しています。最初のデータ結合は「g.arc」にあるため、G 要素をクラス「arc」(「clock_arc」ではなく) で追加する必要があります。2 番目のデータ結合は「パス」上にあり、以前に追加したパス要素を誤って選択しています。2 番目のデータ結合は以前に追加された要素と一致するため、円に期待されるすべての要素を入力していません。

パイ パス要素からサンバースト パス要素を明確にする必要があります。これを行う 1 つの方法は、要素の種類ではなくクラスで選択することです。そのため、2 番目のデータ結合は「パス」ではなく「.pie」になります。このようなもの：

var gClock = svg.selectAll(".clock")
    .data(clockData)
  .enter().append("g")
    .attr("class", "clock");

var pathClock = gClock.append("path");

var pathPie = svg.selectAll(".pie")
    .data(pieData)
  .enter().append("path")
    .attr("class", "pie");

まだお読みでない場合は、これらのチュートリアルを読むことをお勧めします: Joins、Nested Selections、Object Constancyで考える。

于 2012-06-29T15:08:27.437 に答える