2

サークル パッキングの例を実装しようとしています: http://bl.ocks.org/4063530 - しかし、ネストされた "g" ノードを使用して、各サークルの子のスタイル設定と可視性の制御が容易になるようにしたいのですが、この例では、すべてのノードが dom の同じ深さにあります。それらをネストするにはどうすればよいですか？または、ネストしていない場合、円の直接の子のみを選択するにはどうすればよいですか (すべての円のすべての子ではありません)。私は現在、次のようにオブジェクトの深さを持つクラスを追加するように例を修正しました:

d3.json("skills.json", function(error, root) {
  var node = svg.datum(root).selectAll(".node")
    .data(pack.nodes)
    .enter().append("g")
      .attr("class", function(d) { return "node node"+ d.depth; })

そして今これをしたい：

d3.selectAll(".node1").on("mouseover",function(){
    d3.select(this).classed("active",true).//SELECT ALL CHILDREN OF THE HOVERED NODE HERE

誰にもアイデアはありますか？

4

1 に答える 1

2

データを ing した後に g 要素をネストする方法を思いつくことができなかったpackので、ここではあまり洗練されていない解決策を示します。

  function checkParent(d, w) {
      if(!d.parent) return false;

      if(d.parent == w) {
        return true;
      } else {
        return checkParent(d.parent, w);
      }
  }

  node.on("mouseover",function(d){
      d3.select(this).classed("active",true);
      d3.selectAll(".node")
          .filter(function(w){ return checkParent(w, d); })
          .classed("active",true);
  });

  node.on("mouseout",function(d){
      d3.select(this).classed("active",false);
      d3.selectAll(".node")
          .filter(function(w){ return checkParent(w, d); })
          .classed("active",false);
  });

http://bl.ocks.org/4771875

于 2013-02-12T18:06:29.540 に答える