2

コードリンク: http://jsfiddle.net/mj58659094/yKUsQ/;

ここに画像の説明を入力

人 (ノード) をクリックすると、配偶者も選択されます。クリックした人 (夫または妻または子供) のみを選択 (ハイライト) したい。(FireBug で html を調べると、配偶者ノード (g transform="translate(0,70)") は person ノードの内側にあります。それらは外側にあるべきだと思いますが、g class="node" グループ内にあります)。これを修正する方法がわかりません。誰でも、助けてください。ありがとう。

4

1 に答える 1

4

更新：以下を編集

onclickあなたの問題を解決する最善の方法は、その人の配偶者を（入れ子になったグループではなく）その人と同じグループに保つことであるという点で、あなたは正しいと思います。onclickそれに加えて、間違った場所に適用していると思います。私のアドバイスは

  1. 行 325 ～ 330 を次のように変更します。

    var node = g.append("svg:g").attr("class", "node")
    .selectAll("g")
    .data(function (d) { return d.nodes; })
    .enter().append("svg:g");

node.append("svg:rect")
    .on("click", clickedNode);

    現在、個人とその配偶者の両方onclickを含むグループに を適用していましたが、代わりに各個人/配偶者に個別にを使用したいと考えています。この変更を行ったら、コードを更新して、(ノードの group ではなく)各ノードが選択されているかどうかをテストする必要があることに注意してください (355 ～ 365 行目)。また、CSS ファイルの 25 行目と 29 行目のスタイルとCSS を更新する必要があります。onclickrectg.node rect.normal.node rect.selected

  2. 2 番目の問題は、各人の最初の配偶者だけ​​を描いていることです。現在、このupdateSpouses関数は各人に対して反復処理を行っており、最初の配偶者だけ​​の長方形を含むグループを追加しています。あなたがする必要があるのは、最初に配偶者を持つ各人にグループを追加し、次に各人の配偶者にグループを追加することです。updateSpouses開始するための変更方法の大まかなドラフトを次に示します。

    var node = svgTree.selectAll(".node g")
  .append("svg:g").attr("transform", function (d, i) {
     if (i == d3.familyTree.rootGeneration)
       return "translate(" + (d.spouseX) + "," + (d3.familyTree.gapBetweenSpouses) + ")";
     else
       return "translate(" + 0 + "," + (d3.familyTree.gapBetweenSpouses) + ")";
   })
  .filter(function (d, i) { return personSpouses" in d });

var spouses = node.selectAll(".spouse")
  .data(function(d){ return d.personSpouses }).enter()
  .append("rect")
  .on("click", clickedNode);

編集

あなたのコメントに応えて、元のコードhttp://jsfiddle.net/mdml/xJBXm/を修正しました。私が行った変更の簡単な要約は次のとおりです。

  1. 各人をグループに入れ、グループには独自のonclick属性 (行 141 ～ 146) を設定して、四角形/テキストをクリックするclickedNodeと呼び出されるようにします。
  2. また、配偶者の各セットをグループに入れ (上記のように)、それぞれが個別にクリックできるようにします (229 ～ 232 行目)。
  3. resetNodePersonSelected関数と関数を変更してsetNodePersonSelected、子供に加えて配偶者を検索/更新するようにしました。

上記の変更点について大まかに説明しましたが、実装に関して他に質問がある場合はお知らせください。

于 2013-10-07T14:51:01.533 に答える