0

同じものを複数回リストできるツリーを作成したいのですが、マウスオーバーすると同じものがすべて展開したり、点灯したりします。私が理解できないのは、これを行う方法です。私の最初の考えは、次のような行を使用することでした

.attr("class", function(d){return d})

しかし、それはうまくいかないようでした。誰かがこれを行う方法についてアイデアを持っているなら、それは大歓迎です。たとえば、ツリーは次のようになります

Food
  Vegtables
    Carrot
    Pizza
  Tastes good
    Cake
    Pizza

ツリーで一度ピザにカーソルを合わせると、両方のマウスオーバー アクションで同じことができるようにしたいと考えています。

4

2 に答える 2

4

ほとんどの場合、コードはdオブジェクト (ツリー内のノードを表す) であり、オブジェクトのデフォルトの to-string 動作が "[object Object]" を返すため、機能しませんでした。class 属性を「[object Object]」に設定しても、クラスごとにノードを選択するのに役立ちません。

class 属性を data のプロパティとして定義する必要があります。たとえば、データにtypeプロパティがある場合、クラス属性を次のように定義できます。

.attr("class", function(d) { return "node " + d.type; })

次に、対話用の mouseover および mouseout ハンドラーを登録します。

.on("mouseover", function(d) { highlight(d.type); })
.on("mouseout", function(d) { highlight(null); })

最後に、ハイライト機能はクラスごとにノードを選択し、塗りつぶしの色をオーバーライドするアクティブなクラスを切り替えます。

function highlight(type) {
  if (type == null) d3.selectAll(".node").classed("active", false);
  else d3.selectAll(".node." + type).classed("active", true);
}

アクティブなクラスは次のように定義されます。

.node.active {
  fill: red;
}

ここでのライブ例：

関連するノードを選択する方法の詳細については、関連する要素を選択する方法 (および変更する方法)に対する私の回答を参照してください。

于 2012-07-11T04:32:12.803 に答える
0

あなたの答えは簡単です。まず、ツリーのルートにアクセスする必要がありますか? とった？良い。ここで jQuery を呼び出して探しているものを見つけ、クラスを切り替えます。例：

 $(root).find("pizza").hover(function(){
    $(this).toggleClass("colorChange");
 });

これはテストされていませんが、正しくビルドされていれば動作します

于 2012-07-10T20:14:40.310 に答える